CSS发抖

一些让你的页面发抖的CSS类

抖动方式

常见方式汇总

抖动控制

你可以控制抖动的过程...

用法

非常简单,用鼠标悬停在上面看看效果...

<link type="text/css" href="css/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代码里是没有使用浏览器引擎前缀的。希望有一天我们不再需要使用浏览器引擎前缀

下载 csshake.min.css

最后几句话

The about, the idea, and the desire to hear from you to improve the code...

在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。
当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。
于是我就开始思考,我应该做出这个小的CSS project.

下载 csshake.min.css Fork me on Github
40
分享到新浪微博
分享到QQ空间
分享到Facebook
分享到Twitter