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

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

• Codrops 教程：基于 CSS3 的全屏网页过渡特效
• zoom.js：分享一款效果很独特的页面内容缩放插件
• Codrops 教程：基于 CSS3 的精美模态窗口效果
• Debuggex – 超好用的正则表达式可视化调试工具
• Zepto.js – 为现代浏览器而生的轻量javaScript库

使用方法：

　　首先引入样式文件：

<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;}

立即下载 在线演示

• CSS Matic：网页设计师必备的终极 CSS 工具箱
• 前端文摘——网页图片优化的实用工具和技巧分享
• Feedly：替代 Google Reader 最佳 rss 阅读器
• Swipebox – 用于触屏的 jQuery Lightbox 插件
• CSS Beautify – 方便的在线 CSS 代码美化工具

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

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