当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
原文: CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一
效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏); 使用checkbox作为判
这是一款使用html5 svg、css3和js制作的炫酷文字爆炸特效。该文字特效用SVG path属性将文字路径切割
之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Ca
这是一款使用html5 svg、css3和js制作的炫酷文字爆炸特效。该文字特效用SVG path属性将文字路径切割
HTML5翻页效果文字特效怎么实现呢,之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠
蓝色系雨水下落形成的flash粒子效果,看上去很有动感很炫的flash粒子特效,可以通过xml文件方便的修
以前就觉得,Chinaz中图片瀑布布局很好看,以前也看过别人实现的一些方法,大部分是用js实现的,今
三栏布局-宽度只适应 以前做三栏布局时,最常用最简单的方法可能就是:采用float+margin来实现,而C
[转自]http://68ps.5d6d.com/thread-15253-1-3.html 此种效果步骤较繁锁,绝不适合新手,效果是很好
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号