html css动漫素材,66种特效的CSS3动画库animate.css

这是一款非常强大的文字特效动画库animate.css，效果有66种之多，总共分了12个类别，有兴趣的童鞋也可以自行扩展，参考原CSS样式里的做法即可。

查看演示

下载资源：

15

次 下载资源

下载积分：

60

积分

页面的head部分需要引入两个样式库：animate.min.css是所有动画的样式；style.css是测试页面的样式，代码如下：

body部分将12个类别放入一个select里，并设置一个“重试效果”的按钮来实现重复演示，代码如下：

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flip

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

重试效果

底部需要引入jquery库，并设置对应的click、change和样式修改的事件，代码如下： function testAnim(x) {

$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){

$(this).removeClass();

});

};

$(document).ready(function(){

$('.js--triggerAnimation').click(function(e){

e.preventDefault();

var anim = $('.js--animations').val();

testAnim(anim);

});

$('.js--animations').change(function(){

var anim = $(this).val();

testAnim(anim);

});

});