<div class="container">
<div class="text">
<span style="--i:0">H</span>
<span style="--i:1">a</span>
<span style="--i:2">p</span>
<span style="--i:3">p</span>
<span style="--i:4">y</span>
<span style="--i:5"></span>
<span style="--i:6">X</span>
<span style="--i:7">'</span>
<span style="--i:8">m</span>
<span style="--i:9">a</span>
<span style="--i:10">s</span>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(
90deg,
hsla(59, 86%, 68%, 1) 0%,
hsla(134, 36%, 53%, 1) 100%
);
}
.text span {
color: hsla(59, 86%, 68%, 1);
font-size: 60px;
display: inline-block;
text-align: center;
width: 60px;
text-transform: uppercase;
transfrom: translateZ(0px), translateY(0px);
animation: shadowEffect 2s ease-in-out infinite;
animation-delay: calc(200ms * var(--i));
}
@keyframes shadowEffect {
0%,
100% {
text-shadow: 0 0 #000;
transform: translateY(0);
}
50% {
text-shadow: 0 1px #f00, 0 2px #f00, 0 3px #f00, 0 4px #f00, 0 5px #f00,
0 6px #f00, 0 7px #f00, 0 8px #f00, 0 9px #f00, 0 10px #f00;
transform: translateY(-20px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.