Красивая анимация подсвечивающихся букв в слове, выполненная при помощи CSS.
HTML
<h2>
<span>l</span>
<span>i</span>
<span>g</span>
<span>h</span>
<span>t</span>
</h2>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background: #000;
}
h2 {
font-size: 6em;
color: #333333;
font-weight: 500;
}
h2 span {
animation: animate 1.5s linear infinite;
text-transform: uppercase;
}
h2 span:first-child {
animation-delay: 0s;
}
h2 span:nth-child(2) {
animation-delay: 0.2s;
}
h2 span:nth-child(3) {
animation-delay: 0.4s;
}
h2 span:nth-child(4) {
animation-delay: 0.6s;
}
h2 span:nth-child(5) {
animation-delay: 0.8s;
}
@keyframes animate {
0%,
80% {
color: #333333;
text-shadow: none;
}
100% {
color: #ffffff;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 40px #fff,
0 0 80px #fff,
0 0 120px #fff,
0 0 160px #fff;
}
}
