MENU

CSS Shake — CSS抖动特效

August 9, 2019 • CSS资源,CSS笔记

介绍

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。

这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,下面一起来看看介绍:
css-shake-demo1.gif
css-shake-demo2.gif
css-shake-demo3.gif

使用

首先引入css shake的样式表文件

<link type="text/css" href="csshake.css">

给DOM元素添加shake class样式

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

添加抖动样式,一共9种,也可以看DEMO对应添加即可

<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>

另外还能通过 .freeze,.shake-constant & .hover-stop 来控制状态。
演示地址:http://elrumordelaluz.github.io/csshake/

Archives QR Code Tip
QR Code for this page
Tipping QR Code