当前位置:首页 > 开发 > Web前端 > Html5 > 正文

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

发表于: 2015-11-13   作者:互联网   来源:转载   浏览:
摘要: 先看效果 abcd   这个效果也比较简单,利用keyframes对文字的大小、透明度及颜色做循环显示。   CSS 1 <style> 2 @-webkit-keyframes flash { 3 0%{ 4 opacity: 0; 5 } 6 50%{ 7 opa

先看效果

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>

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号