1.html部分
<div class="flashing-letters">
<span>C</span>
<span>O</span>
<span>L</span>
<span>O</span>
<span>R</span>
<span>F</span>
<span>U</span>
<span>L</span>
</div>
2.css部分
.flashing-letters {
height: 50px;
width: 350px;
color: #fff;
font-weight: 800;
background-color: black;
font-size: 30px;
span {
padding: 10px;
animation: colorChange 1s infinite alternate;
}
}
@keyframes colorChange {
to {
color: #ff0266;
}
}
@for $i from 1 through 8 {
.flashing-letters {
span:nth-child(#{$i}) {
animation-delay: ($i - 1)*0.2s;
}
}
}
3.效果