使用wow.js和animate.css滑动页面加载盒子特效

mac2024-06-26  50

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../WOW-master/css/libs/animate.css"> <style type="text/css"> .q { width: 500px; height: 200px; margin: 0 auto; border: 1px solid #000000; margin-bottom: 200px; background: #000000; } </style> </head> <body> <div class="q wow bounce">asifjh</div> <div class="q wow bounceIn">asifjh</div> <div class="q wow bounceInUp">asifjh</div> <div class="q wow bounceInDown">asifjh</div> <div class="q wow bounceInLeft">asifjh</div> <div class="q wow slideInLeft">asifjh</div> <div class="q wow slideInRight">asifjh</div> <div class="q wow bounceInRight">asifjh</div> <div class="q wow slideInUp">asifjh</div> <div class="q wow slideInDown">asifjh</div> <div class="q wow lightSpeedIn">asifjh</div> <div class="q wow pulse">asifjh</div> <div class="q wow flipInX">asifjh</div> <div class="q wow flipInY">asifjh</div> <div class="q wow bounce">asifjh</div> <div class="q wow shake">asifjh</div> <div class="q wow swing">asifjh</div> <div class="q wow bounceInU">asifjh</div> <div class="q wow wobble">asifjh</div> </body> <script type="text/javascript" src="../WOW-master/dist/wow.min.js"></script> <script type="text/javascript"> new WOW().init(); var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); </script> </html>

wow.js下载地址 animate.css下载地址 更多动画样式

最新回复(0)