效果如下：
整个效果就是单个字的发光和熄灭，HTML内这样写：
<div class="text-area"> <span>文</span> <span>字</span> <span>连</span> <span>续</span> <span>光</span> <span>影</span> </div>
我们的文字都使用span标签
针对这个标签设置一个颜色
span { font-size: 40px; color:#faebdf; }
然后再写一个动画
@keyframes shadowing{ to{ color: #ff0266; text-shadow:1px 0 1px #ff0266; } }
这个阴影的话可以根据自己的需要来进行更改里面的值
有了动画后我们运用到span元素里
span { font-size: 40px; color:#faebdf; animation:shadowing 1s ease-in-out infinite alternate; }
下面要做的就是让span元素延迟
span:nth-child(n + 1){ animation-delay:0.2s } span:nth-child(n + 2){ animation-delay:0.4s } span:nth-child(n + 3){ animation-delay:0.6s } span:nth-child(n + 4){ animation-delay:0.8s } span:nth-child(n + 5){ animation-delay:1s } span:nth-child(n + 6){ animation-delay:1.2s }
注意延迟的时间是不一样的，到这里就全部完成了，整体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> @keyframes shadowing{ to{ color: #ff0266; text-shadow:1px 0 1px #ff0266; } } span { font-size: 40px; color:#faebdf; animation:shadowing 1s ease-in-out infinite alternate; } span:nth-child(n + 1){ animation-delay:0.2s } span:nth-child(n + 2){ animation-delay:0.4s } span:nth-child(n + 3){ animation-delay:0.6s } span:nth-child(n + 4){ animation-delay:0.8s } span:nth-child(n + 5){ animation-delay:1s } span:nth-child(n + 6){ animation-delay:1.2s } </style> </head> <body> <div class="text-area"> <span>文</span> <span>字</span> <span>连</span> <span>续</span> <span>光</span> <span>影</span> </div> </body> </html>
