1. 程式人生 > 其它 >微信小程式中如何使用animate.css最新版4.1.1

微信小程式中如何使用animate.css最新版4.1.1

技術標籤:uni-appuni-app微信小程式

animate.css github 地址

前提

先把 animate.css 檔案中的內容下載或複製到本地中,地址: https://github.com/animate-css/animate.css/blob/main/animate.css
然後,把得到的檔案放在小程式根目錄的 common 資料夾下,並且把該檔案的字尾名修改為 .wxss
在這裡插入圖片描述

// 在 app.wxss 中新增
@import './common/animate.wxss';

修改 animate.wxss

找到 `:root` 並修改為 `page`

使用

<!-- 第一個引數是固定,第二個引數是效果。還有迴圈次數,延遲等引數,具體看官網文件--
> <view class="animate__animated animate__bounce">動畫</view>

效果

在這裡插入圖片描述