CSS3+HTML5特效6 - 闪烁的文字

浏览数：36 / 时间：2015年06月09日

先看效果

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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： color html java http c top t class it 代码 a color html java http c top t class it 代码 a

相关文章

随机文章

您可能还喜欢

您可能还喜欢