CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果
1、text-shadow:该属性为文本添加阴影效果。
text-shadow: h-shadow v-shadow blur color;
参数名称 | 说明 |
---|---|
h-shadow | 水平阴影的位置(阴影水平偏移量),可为负值,必需 |
v-shadow | 垂直阴影的位置(阴影垂直偏移量),可为负值,必需 |
blur | 阴影模糊的距离(默认为0),可选 |
color | 阴影颜色(默认为当前字体颜色),可选 |
1、乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果,其实不然,这正是 text-shadow 属性的精妙之处。
2、当阴影的水平偏移量 和 垂直偏移量都为0时,阴影就和文本重合了,这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。
3、当然,为了使外发光更加炫酷,还需要使用到text-shadow 的另一个特性:同时设置多个阴影(使用逗号分隔设置多个阴影)。
- <span>88.88</span>
-
- span{
- font-size: 22px;
- text-shadow: 0px 0px 9px #159AFF;
- font-weight: 600;
- }
-
- <div class="whfg">我会发光</div>
-
- .whfg {
- height: 600px; //设置一个高
- line-height: 600px; //设置行高(垂直居中)
- background-color: black; //黑色背景:黑
- font-size: 120px; //字体120像素
- color: white; //字体颜色:白
- text-align: center; //水平居中
- text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red; //设置发光效果
- }
-
- .whfg:hover{ //为了兼容不同的浏览器,所以声明两个
- -webkit-animation: Glow 0.5s ease infinite alternate; //兼容Chrome
- animation: Glow 0.5s ease infinite alternate;
- }
- @-webkit-keyframes Glow { //兼容Chrome 和 Safari
- from {
- text-shadow: 0 0 10px #fff,
- 0 0 20px #fff,
- 0 0 30px #fff,
- 0 0 40px #00a67c,
- 0 0 70px #00a67c,
- 0 0 80px #00a67c,
- 0 0 100px #00a67c,
- 0 0 150px #00a67c;
- }
- to {
- text-shadow: 0 0 5px #fff,
- 0 0 10px #fff,
- 0 0 15px #fff,
- 0 0 20px #00a67c,
- 0 0 35px #00a67c,
- 0 0 40px #00a67c,
- 0 0 50px #00a67c,
- 0 0 75px #00a67c;
- }
- }
- @keyframes Glow {
- from {
- text-shadow: 0 0 10px #fff,
- 0 0 20px #fff,
- 0 0 30px #fff,
- 0 0 40px #00a67c,
- 0 0 70px #00a67c,
- 0 0 80px #00a67c,
- 0 0 100px #00a67c,
- 0 0 150px #00a67c;
- }
- to {
- text-shadow: 0 0 5px #fff,
- 0 0 10px #fff,
- 0 0 15px #fff,
- 0 0 20px #00a67c,
- 0 0 35px #00a67c,
- 0 0 40px #00a67c,
- 0 0 50px #00a67c,
- 0 0 75px #00a67c;
- }
- }
-
-
会闪烁