欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

Css3实现各种动画类收藏

官方网站和demo:http://daneden.me/animate/

本站demo: http://shanmao.me/wp-content/uploads/2012/12/test1.html

使用方法:

<div id="yourElement" class="animated"></div>

 

$("#yourElement").click(function(){//点击实现效果,其他触发效果自己学习
		testAnim('bounceInRight');//这里面就是参数,你要实现什么效果就传什么参数
})
function testAnim(x) {
		$('#yourElement').addClass(x);
		var wait = window.setTimeout( function(){
			$('#yourElement').removeClass(x)},
			2000
		);
	}

参数参考,可用参数:
Attention seekers:

flash bounce shake tada swing wobble wiggle pulse
Flippers (currently Webkit, Firefox, & IE10 only):

flip flipInX flipOutX flipInY flipOutY
Fading entrances:

fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
Fading exits:

fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
Bouncing entrances:

bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
Bouncing exits:

bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
Rotating entrances:

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
Rotating exits:

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
Lightspeed:

lightSpeedIn lightSpeedOut
Specials:

hinge rollIn rollOut

点击下载css
animate-custom

No related content found.

更多

本文固定链接: http://shanmao.me/web/css3-2/css3-shi-xian-ge-zhong-dong-hua-lei-shou-cang | 山猫的博客

该日志由 admin 于2012年12月04日发表在 css3 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: Css3实现各种动画类收藏 | 山猫的博客