animate.css是一個純CSS的動畫庫，目前有近百種的動畫樣式，使用了animate.css之後，你只需指定想要的動畫效果animate.css就會幫你完成，但是animate.css是在頁面載入時就執行，訪客還沒看到動畫就已經執行完畢，所以要搭配wow.js，便可等到頁面捲動到元素出現在可視區域時才執行動畫，就像本站的首頁一樣...
以下是animate.css的動畫效果清單，animate官網也提供了所有可用的動畫演示
- bounce
- flash
- pulse
- rubberBand
- shakeX
- shakeY
- headShake
- swing
- tada
- wobble
- jello
- heartBeat
- backInDown
- backInLeft
- backInRight
- backInUp
- backOutDown
- backOutLeft
- backOutRight
- backOutUp
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeInTopLeft
- fadeInTopRight
- fadeInBottomLeft
- fadeInBottomRight
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- fadeOutTopLeft
- fadeOutTopRight
- fadeOutBottomRight
- fadeOutBottomLeft
- flip
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedInRight
- lightSpeedInLeft
- lightSpeedOutRight
- lightSpeedOutLeft
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- jackInTheBox
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
<!-- 首先載入必要檔案(懶人包有附)並初始化 --> <link href="css/animate.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/wow.min.js"></script> <script type="text/javascript"> new WOW().init(); </script> <!-- 在要執行動畫的元素上指定動畫方式，如果要HTML元素出現可是範圍才執行動畫，請務必加上wow類 --> <div class="col-md-6 wow fadeInRight"> <div class="new_articles"> <a href="article-387-1%E3%80%81ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BFDIY%E6%87%B6%E4%BA%BA%E5%8C%85%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89.html" title="1、ECSHOP響應式模板DIY懶人包免費下載 2020-09-23" class="d-block"> <div class="img_box fl" style="width:160px;height:100px;background-image: url(/images/upload/image/202009/20200923172515_69334.jpg);background-size: contain;"></div> </a> <div class="info"> <div class="title text-truncate"> <a href="article-387-1%E3%80%81ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BFDIY%E6%87%B6%E4%BA%BA%E5%8C%85%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89.html" title="1、ECSHOP響應式模板DIY懶人包免費下載 2020-09-23" class="d-block"> <i class="fas fa-pencil-ruler"></i> <span class="is_new"><em>NEW</em></span> 1、ECSHOP響應式模板DIY懶人包免費下載 </a> </div> <div class="text-truncate3"> Bootstrap是一個不錯用的響應式前台CSS框架，加上他的JS可以執行許多Jquery的效果，Bootstrap也已經對不同平台設備做了相容性的處理，因此就算再有此類問題也只是少數了... 說是ECSHOP模板，其實套用到任何網站模板都一樣，只是布局排版因人而異，但基本上沒多大的難度可言，因為ECSHOP的版型檔案比較多，建議只針對需要的檔案做修改，沒用到的檔案先略過，這樣可以節省不少時間。... </div> </div> </div> </div>
