csshake.css强大的CSS3元素抖动动画库

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像)。这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告、图像、按钮上,这样可以用来吸引用户眼球从而促使去点击它。这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动、无限抖动、鼠标悬停拉动,一起来玩一下吧。

使用方法

要使用csshake,首先要将csshake.css文件引入你的html文件的<head>中。

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

然后你就可以使用下面的方法是DOM元素抖动起来:

<div class="shake"></div>
<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 来控制抖动动画的状态。

定制

你可以通过SASS @mixins 来创建新的抖动动画。

编辑_mixins.scss文件:

@include shake($x, $y, $rot, $name, $steps, $opacity);
  • $x 和 $y 是在x或y轴上移动的像素。

  • $rot 是旋转的角度。

  • $name 是参数中元素的名字。

  • $steps 可以调整动画的循环次数(例如:设置为10可以是动画每次完成10%)。

  • $opacity 表示是否给动画添加透明度。

下面是一个例子:

@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);

编辑_shake.scss文件:

@include animation($name, $dur, $iter, $tim, $del);
  • $name :animation-name。

  • $dur :animation-duration。

  • $iter :animation-iteration-count。

  • $tim :animation-timing-function。

  • $del :animation-delay。

下面是一个例子:

@include animation(shake-slow, 5s);

注意:你必须使用random()函数来编译SASS文件。 

你可以在下面三篇文章中获得更多这方面的信息:

更多关于csshake的资料请参考:https://github.com/daneden/animate.css

官方地址:http://elrumordelaluz.github.io/csshake/#1


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏