animation-delay 实现文字连续光影特效
刀刀
0字
0分钟
2026/8/16
CSS 颜色变化
先拆分成实现一个文字的效果，实现后再考虑多个文字的实现。
查看效果图，它改变的是文字的颜色和阴影效果，且没有通过鼠标就能实现，因此使用动画来实现这个效果。
配置一个动画效果，修改其文字颜色、文字阴影，该动画是无限循环的。但是动画结束后需要反向返回起点，而不是直接变成白色。代码：
css
span {
color: #fff;
animation: spread 1s ease-in-out infinite alternate;
}
@keyframes spread {
to {
color: skyblue;
text-shadow: 20px 0 70px skyblue;
}
}CSS 动画延迟
文字动画效果已实现，不过是整体一起变化，需要循环设置动画延迟。
使用 scss ，代码：
scss
@for $i from 1 through 8 {
span:nth-child(#{$i}) {
animation-delay: ($i - 1) * 0.2s;
}
}最终编译成 CSS 代码如下：
css
span:nth-child(1) {
animation-delay: 0s;
}
span:nth-child(2) {
animation-delay: 0.2s;
}
span:nth-child(3) {
animation-delay: 0.4s;
}
span:nth-child(4) {
animation-delay: 0.6s;
}
span:nth-child(5) {
animation-delay: 0.8s;
}
span:nth-child(6) {
animation-delay: 1s;
}
span:nth-child(7) {
animation-delay: 1.2s;
}
span:nth-child(8) {
animation-delay: 1.4s;
}CSS 总体效果
跳转预览：点击跳转
贡献者
v_duyilin
平安喜乐
duyidao 刀刀