html设置发光字体制作,CSS3制作炫酷的自定义发光文字

最新推荐文章于 2024-01-21 16:25:05 发布

weixin_39845113

最新推荐文章于 2024-01-21 16:25:05 发布

阅读量386

点赞数

文章标签： html设置发光字体制作

这段代码展示了如何利用CSS3的text-shadow属性和关键帧动画来创建多种颜色交替闪烁的发光文字效果，适用于网页动态标题或按钮装饰，支持Firefox和Chrome浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3制作炫酷的自定义发光文字

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #FF1177,

0 0 35px #FF1177,

0 0 40px #FF1177,

0 0 50px #FF1177,

0 0 75px #FF1177;

}

@-webkit-keyframes neon2 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

@-webkit-keyframes neon3 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #FFDD1B,

0 0 70px #FFDD1B,

0 0 80px #FFDD1B,

0 0 100px #FFDD1B,

0 0 150px #FFDD1B;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #FFDD1B,

0 0 35px #FFDD1B,

0 0 40px #FFDD1B,

0 0 50px #FFDD1B,

0 0 75px #FFDD1B;

}

@-webkit-keyframes neon4 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #B6FF00,

0 0 70px #B6FF00,

0 0 80px #B6FF00,

0 0 100px #B6FF00,

0 0 150px #B6FF00;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #B6FF00,

0 0 35px #B6FF00,

0 0 40px #B6FF00,

0 0 50px #B6FF00,

0 0 75px #B6FF00;

}

@-webkit-keyframes neon5 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #FF9900,

0 0 70px #FF9900,

0 0 80px #FF9900,

0 0 100px #FF9900,

0 0 150px #FF9900;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #FF9900,

0 0 35px #FF9900,

0 0 40px #FF9900,

0 0 50px #FF9900,

0 0 75px #FF9900;

}

@-webkit-keyframes neon6 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #ff00de,

0 0 70px #ff00de,

0 0 80px #ff00de,

0 0 100px #ff00de,

0 0 150px #ff00de;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #ff00de,

0 0 35px #ff00de,

0 0 40px #ff00de,

0 0 50px #ff00de,

0 0 75px #ff00de;

}

/*glow for mozilla*/

@-moz-keyframes neon1 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #FF1177,

0 0 70px #FF1177,

0 0 80px #FF1177,

0 0 100px #FF1177,

0 0 150px #FF1177;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #FF1177,

0 0 35px #FF1177,

0 0 40px #FF1177,

0 0 50px #FF1177,

0 0 75px #FF1177;

}

@-moz-keyframes neon2 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

@-moz-keyframes neon3 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #FFDD1B,

0 0 70px #FFDD1B,

0 0 80px #FFDD1B,

0 0 100px #FFDD1B,

0 0 150px #FFDD1B;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #FFDD1B,

0 0 35px #FFDD1B,

0 0 40px #FFDD1B,

0 0 50px #FFDD1B,

0 0 75px #FFDD1B;

}

@-moz-keyframes neon4 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #B6FF00,

0 0 70px #B6FF00,

0 0 80px #B6FF00,

0 0 100px #B6FF00,

0 0 150px #B6FF00;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #B6FF00,

0 0 35px #B6FF00,

0 0 40px #B6FF00,

0 0 50px #B6FF00,

0 0 75px #B6FF00;

}

@-moz-keyframes neon5 {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #FF9900,

0 0 70px #FF9900,

0 0 80px #FF9900,

0 0 100px #FF9900,

0 0 150px #FF9900;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #FF9900,

0 0 35px #FF9900,

0 0 40px #FF9900,

0 0 50px #FF9900,

0 0 75px #FF9900;

}

@-moz-keyframes neon6 {

from {