uni 引入 animate.css v4版本教程

风语筑

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;
    }
阅读 1.5k
0 声望
0 粉丝
0 条评论
0 声望
0 粉丝
文章目录
宣传栏