CSS发抖
一些让你的页面发抖的CSS类
抖动方式
常见方式汇总
-
Bs
基本抖动
-
Ss
慢速抖动
-
Ls
轻微抖动
-
Hs
剧烈抖动
-
⇄
横向抖动
-
⇵
上下抖动
-
↻
扭动
-
Os
隐现抖动
-
✌
疯狂抖动
-
ℇ
抖动不停
抖动控制
你可以控制抖动的过程...
-
❄
抖动后停止
-
⾉
一直抖动，鼠标悬停时静止
用法
非常简单，用鼠标悬停在上面看看效果...
<link type="text/css" href="csshake.css"><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>更丰富的控制方式
The Sass @mixins, and so on...
@include shake($x, $y, $rot, $name, $steps, $opacity); /* _mixins.scss */
/* $x & $y: pixels to move on the X and Y axis,
$rot: deg to rotate
$name: the name assigned to those parameters
$steps: adjust the animation loop (i.e 10 makes an animation in steps of 10%)
$opacity: true/false to add opacity animation */
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true); /* an example */
@include animation($name, $dur, $iter, $tim, $del); /* _shake.scss */
/* $name: animation-name,
$dur: animation-duration,
$iter: animation-iteration-count,
$tim: animation-timing-function,
$del: animation-delay */
@include animation(shake-slow, 5s); /* an example */
注意：你需要使用random()函数来编译Sass文件。
这里有如何实现的方法，或者参考这里或这里。
还需要注意的是，这些CSS代码里是没有使用浏览器引擎前缀的。希望有一天我们不再需要使用浏览器引擎前缀。
最后几句话
The about, the idea, and the desire to hear from you to improve the code...
在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。
当开发完成后，我发现了这个很酷的jQuery plugin(由@jackrugile开发)。
于是我就开始思考，我应该做出这个小的CSS project.