|
[tr][td] Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包，你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上，包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。
图片：113204jyl3bex2ak2klraw.jpg  使用方法： 首先引入样式文件： [*] 复制代码 然后给你想要实现动画效果的元素添加类 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 [/td][/tr] |
|
