图片/图形
3D动画特效的跨浏览器CSS3动画
PetitQ
AllAnimation.css 是一款带 37 种 3D 动画特效的跨浏览器 CSS3 动画框架。它可以轻松的制作出各种 CSS3 3D 动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的 class 即可。
使用方法
使用 AllAnimation.css 时要引入 all-animation.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
HTML 结构
你可以使用一个按钮来触发事件，在事件中为指定元素添加相应的动画 class。
<div id="animation"></div>
<button class="anny-class">Trigger class, go!</button>
初始化插件
在编写上面的 HTML 结构之后，可以通过下面的方法来触发 CSS3 动画。
$(".anny-class").click(function(){
$("#animation").addClass("journal");
});
或者使用纯 JS 的方法来编写代码：
document.querySelector('button').addEventListener('click',function(e){
e.preventDefault();
document.querySelector('div').classList.add('dance');
});
你还可以为动画设置一个定时器。
setTimeout(function(){
$("#animation").addClass("journal");
},2000);
另外也可以使用 jQuery 的链式编程方式来取消一个动画在执行另一个动画。
$("#animation").removeClass("journal").addClass("four-rock");
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
