效果如下:
整个效果就是单个字的发光和熄灭,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>
到这里整个效果就制作完成了,感谢您阅读此文章。