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/post/7203.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知