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>