文本/链接

hake强大CSS3元素抖动动画库

阿里云


csshake 是一款非常强大的 CSS3 元素抖动动画库插件。csshake 可以使元素进行各种各样的抖动动画,可以在加载时就抖动或鼠标滑过元素时抖动,目前共有 10 种抖动效果。csshake 简单实用,非常强大。csshake 可以使 DOM 元素抖动起来。该抖动动画库中共有 10 种不同的抖动效果。

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <head>
  2.   <link rel="stylesheet"  type="text/css" href="csshake.css">
  3. </head>

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

  1. <div class="shake"></div>
  2.  
  3. <div class="shake shake-hard"></div>
  4.  
  5. <div class="shake shake-slow"></div>
  6.  
  7. <div class="shake shake-little"></div>
  8.  
  9. <div class="shake shake-horizontal"></div>
  10.  
  11. <div class="shake shake.vertical"></div>
  12.  
  13. <div class="shake shake-rotate"></div>
  14.  
  15. <div class="shake shake-opacity"></div>
  16.  
  17. <div class="shake shake-crazy"></div>

你可以通过 .freeze 、 .shake-constant 和 .hover-stop 来控制抖动动画的状态。

定制

你可以通过 SASS @mixins 来创建新的抖动动画,编辑 _mixins.scss 文件:

  1. @include shake($x, $y, $rot, $name, $steps, $opacity);

$x 和 $y 是在 x 或 y 轴上移动的像素

$rot 是旋转的角度

$name 是参数中元素的名字

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

$opacity 表示是否给动画添加透明度
下面是一个例子:

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

编辑 _shake.scss 文件:

  1. @include animation($name, $dur, $iter, $tim, $del);

$name :animation-name

$dur :animation-duration

$iter :animation-iteration-count

$tim :animation-timing-function

$del :animation-delay
下面是一个例子:

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

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

hake 强大 CSS3 元素抖动动画库

已有 483 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!