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 網站
第四步:執行
直接在瀏覽器中執行,就能看到效果類