首先html需要这样设计
<div class="text-area">
<span>连</span>
<span>续</span>
<span>发</span>
<span>光</span>
</div>
然后设置字体颜色,切记不要与发光颜色冲突
然后设置动画:
@keyframes shadowing{
to{
color:#ff0266;
text-shadow:20px 0 70px #ff0266;
}
}
然后应用到span元素里边去:
span {
color:white;
animation:shadowing 1s ease-in-out infinite alternate
}
然后给span元素从第二个开始进行延迟即可:
span:nth-child(n + 1//记得给每一个span加上哦,就是n+数字累推){
animation-delay:0.2s//延迟时间也要累加
}
即可实现