首页 > Web开发 > 详细

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

时间:2014-02-20 08:34:33      阅读:391      评论:0      收藏:0      [点我收藏+]

先看效果

abcd

 

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

 

CSS

bubuko.com,布布扣
 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>
bubuko.com,布布扣

 

HTML

bubuko.com,布布扣
1 <div class="flash">abcd</div>
bubuko.com,布布扣

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

原文:http://www.cnblogs.com/z-gia/p/3556746.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!