如何使用Animate.css插件庫


Animate.css插件庫是對css3中keyframes動畫的一個封裝,里面將2D和3D效果進行封裝結合,最終形成這個文件,只需要簡單的引用就可以,而且兼容其他瀏覽器

第一步:下載

官網地址:https://animate.style/

官網是一個英文網站,提供了npm,yarn,和CDN的引入方式

CDN的引入地址:https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

還可以在我的百度網盤中下載

鏈接:https://pan.baidu.com/s/1bXUyYZ7c7kwnEQUIPP3aiw  密碼:zt4p

 

第二步:引入

CDN引入方式:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
本地引入方式:
<link rel="stylesheet" href="./animation.min.css">

 

第三步:調用

創建標簽,添加對應的class類名

animated 表示動畫執行的時間

rollOut 表示動畫的樣式

<div class="animated rollOut">歡迎使用Animation</div>
所有的動畫樣式,可以參考 https://www.jq22.com/yanshi819 網站
 

第四步:執行

直接在瀏覽器中執行,就能看到效果類


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM