CSS3 transform

谁借莪１个温暖的怀抱￠ 2021-12-12 02:37 305阅读 0赞

最初这个效果是在[Playnext.cn][]看到的，感觉挺好玩，今天就跟大家分享一下，用CSS3怎么来实现这个效果。 先来看下我做的demo [Hello 二货][Hello] ，这个抖动效果的原理是通过元素小角度快速旋转和元素上下左右快速移动组合而成的，首先我们来了解两个个CSS3的知识点：transform、animation，下面我们逐一介绍一下这两个属性。

## transform ##

从字面上讲是变形改变的意思，他包括：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）、matrix（矩阵变形），抖动效果中我们只用到了rotate和translate，它的语法是：

-*-transform : none | <transform-function> [ <transform-function> ]*

**rotate **查看[rotate Demo][]，代码：

[![html5-helloEH-rotate][]][html5-helloEH-rotate]

其中的“30deg”代表旋转的角度即旋转30度，这里为正数所以是顺时针旋转30度，如果为负数则恰好相反是逆时针旋转30度。 **translate** 查看[translate Demo][]，代码：

[![html5-helloEH-translate][]][html5-helloEH-translate] 这里的translate(x,y)，其中x代表横轴移动距离，y代表纵轴移动距离，与left和top颇有相似之处。这里我只写了webkit内核浏览器的前缀，其它的前缀在demo页面中是有的。

## animation ##

animation可以通过多种方式定义元素的属性值来实现更为复杂的动画，它的语法如下：

-*-animation:name duration timing-funcion delay iteration-count

其中name代表指定的关键帧名称；duration代表单次动画执行时间；timing-function代表执行的动画类型，比如linear；delay执行动画之前所延迟的时间；iteration-count代表动画执行的次数，infinite表示循环执行。 **animation关键帧**定义，直接看语法：

@-*-keyframes 关键帧名称{
    	0% {}
    	25% {定义元素需要执行的动画或者属性}
    	50% {定义元素需要执行的动画或者属性}
    	75% {定义元素需要执行的动画或者属性}
    	100% {定义元素需要执行的动画或者属性}
    }

关键帧的名称是可以自定义的，其中0%和100%代表动画的结束，25%、50%、75%代表动画分别执行到25%、50%、75%的时候所对应的需要执行的动画。 在线预览 [animation Demo][]，代码如下：

知识点已经了解了，接下去就是把这些方法结合到一起。我的思路是这样的：给元素的hover事件定义一个animation，在它的动画关键帧里我分别定义0%、25%、50%、75%和100%时候的所执行的动画，这些动画都是使用了transform的rotate和translate属性来使元素小幅度的旋转并上下左右移动。通过定义animation的duration为0.1s，从而使这个效果快速的运行，从视觉上给眼睛一种它在抽风一样的抖动。 最后请看[完整版Demo][Hello]，代码如下：

转载于:https://www.cnblogs.com/iancj/archive/2013/03/27/3652872.html

[Playnext.cn]: http://www.playnext.cn/
[Hello]: http://www.iancj.com/demo/css3/helloEH/index.html
[rotate Demo]: http://www.iancj.com/demo/css3/helloEH/rotate.html
[html5-helloEH-rotate]: /images/20211211/4302ea09b9dd457485757004d7901cb4.png
[translate Demo]: http://www.iancj.com/demo/css3/helloEH/translate.html
[html5-helloEH-translate]: /images/20211211/295d133629fd42f5b600e4290b6575a6.png
[animation Demo]: http://www.iancj.com/demo/css3/helloEH/animation.html