共计 443 个字符,预计需要花费 2 分钟才能阅读完成。
1. 官网链接 https://animate.style/
2. 引入步骤:
(1)npm install animate.css –save
(2)App.vue 中 @import ‘animate.css’
(3)页面中应用(留神双横线连贯):
<div class='life'>
<div class="animate__animated animate__swing animate__infinite animate__slower animate__delay-2s"> 你好今天 </div>
</div>
属性介绍(详见官网)
①animate__animated 固定值
②animate__swing 动画类名
③animate__infinite 反复次数
④animate__slower 执行速度
⑤animate__delay-2s 提早两秒执行
(4)而后你会发现页面还是静止的,因为还有最要害的一步 - 定义初始变量,实现!!
.life {
--animate-duration: 1s;
--animate-delay: 1s;
}
正文完