HTML代码

1
<div class="box">闪烁效果</div>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*文字闪烁*/
.box1{
    color:red;
    animation: changeshadow 6s  ease-in  infinite ;
    -webkit-animation: changeshadow 6s linear infinite;
    -moz-animation: changeshadow 6s linear infinite;
    -ms-animation: changeshadow 6s linear infinite;
    -o-animation: changeshadow 6s linear infinite;
}
@keyframes changeshadow {
    0%{ text-shadow: 0 0 4px red}
    50%{ text-shadow: 0 0 40px red}
    100%{ text-shadow: 0 0 4px red}
}
@-webkit-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px red}
    50%{ text-shadow: 0 0 40px red}
    100%{ text-shadow: 0 0 4px red}
}
@-moz-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px red}
    50%{ text-shadow: 0 0 40px red}
    100%{ text-shadow: 0 0 4px red}
}
@-ms-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px red}
    50%{ text-shadow: 0 0 40px red}
    100%{ text-shadow: 0 0 4px red}
}
@-o-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px red}
    50%{ text-shadow: 0 0 40px red}
    100%{ text-shadow: 0 0 4px red}
}

PS.

来源：一些有趣的 html/css 特效