Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上,包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。
然后给你想要实现动画效果的元素添加类 magictime 以及动画类名,例如:
如果你要一定时间后执行动画,可以这样写:
循环执行动画也是可以的:
你还可以自定义动画的执行时间,修改时间参数即可:
如果是针对特定动画效果的修改,则可以这样:
关键词:CSS3学习网站、CSS3教程、HTML5
使用方法: 首先引入样式文件:
- <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;
- }
立即下载 在线演示
本文由HTML5中国网为您提供关键词:CSS3学习网站、CSS3教程、HTML5
【Magic CSS3 – 创建各种神奇的交互动画效果】相关文章
2. Isotope-jQuery神奇的分类过滤和排序布局插件
3. 神奇的HTML5:现在Chrome浏览器支持直接通过Gmail打开邮件链接
7. Magí
10. Cytoscape.js – 用于数据分析和可视化的交互图形库
本文来源:https://www.51html5.com/a1005.html
上一篇:实现内容倾斜的 3D 幻灯片效果
下一篇:Web开发者不容错过的10段CSS代码
﹝Magic CSS3 – 创建各种神奇的交互动画效果﹞相关内容
- Cytoscape.js – 用于数据分析和可视化的交互图形库
- 基于 HTML5 & jQuery 的交互表格插件
- 2014年流行的交互式原型设计工具
- 利用CSS3制作动画效果
- CSS3动画效果入门
- CSS3 transition实现超酷图片墙动画效果
- 利用CSS3制作动画效果
- CSS3 transition实现超酷图片墙动画效果
- 使用CSS3的褪色和动画效果构建消息提醒框
- CSS3实现的图片加载动画效果