CSS3+HTML5特效6

先看效果

abcd

这个效果也比较简单，利用keyframes对文字的大小、透明度及颜色做循环显示。

CSS

 1 <style>
 2 @-webkit-keyframes flash {
 3     0%{
 4         opacity: 0;
 5     }
 6     50%{
 7         opacity: 1;
 8         color: #ff0000;
 9         font-size: 18px;
10     }
11     100%{
12         opacity: 0;
13     }
14 }
15 @keyframes flash {
16     0%{
17         opacity: 0;
18     }
19     50%{
20         opacity: 1;
21         color: #ff0000;
22         font-size: 18px;
23     }
24     100%{
25         opacity: 0;
26     }
27 }
28 .flash{
29     position: relative;
30     top: 10px;
31     left: 10px;
32     width: 200px;
33     color: #0000ff;
34     -webkit-animation:flash 1.5s infinite  cubic-bezier(1,0,0.5,0) ;
35     animation:flash 1.5s infinite  cubic-bezier(1,0,0.5,0) ;
36 }
37 </style>

HTML

1 <div class="flash">abcd</div>