پیشنمایش زنده
کد HTML
<div class="word">
<div class="letter1 letter" style="--i: 1;">L</div>
<div class="letter2 letter" style="--i: 2;">O</div>
<div class="letter3 letter" style="--i: 3;">A</div>
<div class="letter4 letter" style="--i: 4;">D</div>
<div class="letter5 letter" style="--i: 5;">I</div>
<div class="letter6 letter" style="--i: 6;">N</div>
<div class="letter7 letter" style="--i: 7;">G</div>
<div class="letter8 letter" style="--i: 8;">.</div>
<div class="letter9 letter" style="--i: 9;">.</div>
</div>
کد CSS
.word {
color: white;
display: flex;
flex-direction: row;
font-size: 1em;
}
.letter {
animation: letter 1s ease-in-out infinite alternate;
animation-delay: calc(-1 * var(--i) * 0.2s);
}
@keyframes letter {
0% {
font-weight: 700;
font-size: 3em;
}
100% {
font-weight: 100;
font-size: 2em;
}
}