span Open
View Compiled
$red-color: #ff035b;
$blue-color: #04d9ff;
body {
display: flex;
align-items: center;
justify-content: center;
width: 100vw; height: 100vh;
background: #0a0025;
overflow: hidden;
}
span {
font-family: 'Commissioner', sans-serif;
font-size: 124px;
color: #ffd6d6;
padding: 50px 60px 60px 60px;
line-height: 1;
border: 10px solid #c6e2ff;
border-radius: 50%;
text-transform: uppercase;
animation: flashing 1.4s infinite alternate;
}
@keyframes flashing {
0%, 18%, 21%, 32%, 35%, 39%, 42%, 100% {
text-shadow:
0 0 16px #ffd6d6,
0 0 16px #ffd6d6,
0 0 32px $red-color,
0 0 64px $red-color,
0 0 90px $red-color,
0 0 124px $red-color;
box-shadow:
0 0 8px #fff,
inset 0 0 8px #fff,
0 0 32px $blue-color,
inset 0 0 32px $blue-color,
0 0 64px $blue-color,
inset 0 0 64px $blue-color;
}
20%, 34%, 41% {
text-shadow: none;
box-shadow: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.