Magic CSS3 – 创建各种神奇的交互动画效果

  Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上,包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。

您可能感兴趣的相关文章

 

 

使用方法: 

  首先引入样式文件:

<link rel="stylesheet" href="yourpath/magic.css">

  然后给你想要实现动画效果的元素添加类 magictime 以及动画类名,例如:

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

  如果你要一定时间后执行动画,可以这样写:

setTimeout(function(){
    $('.yourdiv').addClass('magictime puffIn');
}, 5000);

  循环执行动画也是可以的:

setInterval(function(){ 
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

  你还可以自定义动画的执行时间,修改时间参数即可:

.magictime {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}

  如果是针对特定动画效果的修改,则可以这样:

.magictime.magic {
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	-o-animation-duration: 10s;
	animation-duration: 10s;
}

  

立即下载      在线演示

 

本文链接:Magic CSS3 – 创建各种神奇的交互动画效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

posted @ 2014-04-14 10:44  梦想天空(山边小溪)  阅读(18080)  评论(2编辑  收藏  举报