http://www.shejidaren.com/css-shake-animation.html
动起来!好玩的CSS抖动样式 – CSS Shake
三月 13, 2014 发表于: HTML & CSS. 评论 (3)CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。
这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,下面一起来看看介绍:
一共9个不同的抖动动画选择
使用教程
首先引入css shake的样式表文件。
给你的DOM元素添加shake class样式
添加抖动样式,一共9种,也可以看DEMO对应添加即可
另外我还能通过 .freeze
, .shake-constant
& .hover-stop
来控制状态,具体自己试下哦!