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

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

使用方法： 　　首先引入样式文件：

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

复制代码

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

1. $('.yourdiv').hover(function () {
   
2. 
   
3.   $(this).addClass('magictime puffIn');
   
4. 
   
5. });

复制代码

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

1. setTimeout(function(){
   
2. 
   
3.     $('.yourdiv').addClass('magictime puffIn');
   
4. 
   
5. }, 5000);

复制代码

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

1. setInterval(function(){
   
2. 
   
3.     $('.yourdiv').toggleClass('magictime puffIn');
   
4. 
   
5. }, 3000 );

复制代码

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

1. .magictime {
   
2. 
   
3.     -webkit-animation-duration: 1s;
   
4. 
   
5.     -moz-animation-duration: 1s;
   
6. 
   
7.     -o-animation-duration: 1s;
   
8. 
   
9.     animation-duration: 1s;
   
10. 
    
11. }

复制代码

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

1. .magictime.magic {
   
2. 
   
3.     -webkit-animation-duration: 10s;
   
4. 
   
5.     -moz-animation-duration: 10s;
   
6. 
   
7.     -o-animation-duration: 10s;
   
8. 
   
9.     animation-duration: 10s;
   
10. 
    
11. }

复制代码

立即下载      在线演示

本文由HTML5中国网为您提供
关键词：CSS3学习网站、CSS3教程、HTML5

【Magic CSS3 – 创建各种神奇的交互动画效果】相关文章

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

2. Isotope-jQuery神奇的分类过滤和排序布局插件

3. 神奇的HTML5：现在Chrome浏览器支持直接通过Gmail打开邮件链接

4. Effeckt.css项目：CSS交互动画应用集锦

5. 你可能不知道的5种 CSS 和 JS 的交互方式

6. CSS3动画效果-animate.css

7. Magí

8. 基于 HTML5 & jQuery 的交互表格插件

9. 使用 HTML5 构建 Vyclone 的交互式体验

10. Cytoscape.js – 用于数据分析和可视化的交互图形库

本文来源：https://www.51html5.com/a1005.html