CSS3通过js控制animate运动
1、Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，使用方法也非常简单，页面里写的很清楚，我就不多说了，下面小例子来看吧。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../uu/animate.min.css"/> <!--引用animate.css--> <style type="text/css"> *{ padding: 0; margin: 0; } h1{ width: 500px; height: 100px; background: cadetblue; color: white; text-align: center; line-height: 100px; margin: 100px auto; } </style> </head> <body> <input type="button" name="btn" id="btn" value="点击运动" /> <br /><br /> <!--加animated这个插件的动画 ，动画的名字bouncelnleft--> <h1 id="cc">学习animate 运动库</h1> <script type="text/javascript"> document.getElementById('btn').onclick = function(){ var cc = document.getElementById('cc'); cc.className = 'animated bounceInLeft'; //className 属性设置或返回元素的 class 属性。 } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知