css文字发光效果

临近下班，突然弹出来一条消息

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;
}

这就完成啦！！