临近下班，突然弹出来一条消息
image.png
我。。。。
于是，好吧。
说起文字发光首先想到的是text-shadow，文字阴影
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0
语法：text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值
v-shadow：必需。垂直阴影的位置。允许负值
blur：可选。模糊的距离
color：可选。阴影的颜色
先写 一行文字
<p>hello world!</p>
先把发光的最大阴影写出来
p {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #fff700,
0 0 70px #fff700,
0 0 80px #fff700,
0 0 100px #fff700,
0 0 150px #fff700;
}
image.png
再调出光暗淡下去的效果
p{
text-shadow: 0 0 0px #fff,
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff700,
0 0 20px #fff700,
0 0 30px #fff700,
0 0 40px #fff700,
0 0 50px #fff700;
}
image.png
然后为了让他自己发光，写成动画效果
@keyframes light {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #fff700,
0 0 70px #fff700,
0 0 80px #fff700,
0 0 100px #fff700,
0 0 150px #fff700;
}
to {
text-shadow: 0 0 0px #fff,
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff700,
0 0 20px #fff700,
0 0 30px #fff700,
0 0 40px #fff700,
0 0 50px #fff700;
}
}
给文字设置动画时间，循环播放
p{
animation: light 1.5s ease infinite alternate;
}
这就完成啦！！
