用css3写好看的发光字
Posted 废柴美少女
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用css3写好看的发光字相关的知识，希望对你有一定的参考价值。
这种发光字体感觉very的适合放在自己的个人网站上
原理也比较简单
产生视觉放光的概念主要就是白色和渐变晕染
现在我们来看一下css的代码
p:nth-child(1) a{
color:#FF1177;
}
p:nth-child(1) a:hover{
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}
p a:hover{
color:#ffffff;
}
@-webkit-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;
}
}
实际的配置就是这么简单了
难点可能就是要找渐变的颜色代码需要一丢丢审美
发光的具体概念一个字就是白色
渐变的感觉就是可以用阴影去做哦
往期优质技术文（爱学习的你点关注哦～）
canvas做的
淘宝店铺：HECO的男女朋友
淘口令：€mnYyb3ULQn0€
店铺商品打折ing，男装女装记得点分类查看哦～
以上是关于用css3写好看的发光字的主要内容，如果未能解决你的问题，请参考以下文章
一个动态小导航栏(好看的，用C3)（不依赖js，点击小图切换大的背景图）