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 网站
第四步:执行
直接在浏览器中执行,就能看到效果类