html文字发光效果,css文字发光效果

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

image.png

我。。。。

于是，好吧。

说起文字发光首先想到的是text-shadow，文字阴影

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0

语法：text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值

v-shadow：必需。垂直阴影的位置。允许负值

blur：可选。模糊的距离

color：可选。阴影的颜色

先写 一行文字

hello world!

先把发光的最大阴影写出来

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;

}

这就完成啦！！