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;}
立即下载 在线演示
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
894
收藏
