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

CSS3+HTML5特效5 - 震动的文字

发表于: 2015-11-13   作者:互联网   来源:转载   浏览:
摘要: 先看效果(把鼠标移上去看看) abcd     这个效果很简单,就是移动文字的位置模拟出震动的效果。   Css 1 <style> 2 @-webkit-keyframes shake { 3 0%{ 4 -webkit-transform:translate(2px, 2px); 5

先看效果(把鼠标移上去看看

abcd

 

 

这个效果很简单,就是移动文字的位置模拟出震动的效果。

 

Css

 1 <style>

 2 @-webkit-keyframes shake {

 3     0%{

 4         -webkit-transform:translate(2px, 2px);

 5     }

 6     25%{

 7         -webkit-transform:translate(-2px, -2px);

 8     }

 9     50%{

10         -webkit-transform:translate(0px, 0px);

11     }

12     75%{

13         -webkit-transform:translate(2px, -2px);

14     }

15     100%{

16         -webkit-transform:translate(-2px, 2px);

17     }

18 }

19 @keyframes shake {

20     0%{

21         transform:translate(2px, 2px);

22     }

23     25%{

24         transform:translate(-2px, -2px);

25     }

26     50%{

27         transform:translate(0px, 0px);

28     }

29     75%{

30         transform:translate(2px, -2px);

31     }

32     100%{

33         transform:translate(-2px, 2px);

34     }

35 }

36 .shake{

37     position: relative;

38     top: 30px;

39     left: 100px;

40     width: 200px;

41     color: #0000ff;

42 }

43 .shake:hover{

44     -webkit-animation:shake 0.2s infinite;

45     animation:shake 0.2s infinite;

46 }

47 </style>

 

Html

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

 

CSS3+HTML5特效5 - 震动的文字

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

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