CSS 擴充推薦 Animate.css

分類

建立時間: 2023年7月21日 01:01
更新時間: 2023年7月21日 01:01

說明

分享一個簡易實現 css 動畫的擴充功能，雖然現在內建的 css 語法實現動畫很方便，但如果只是要用一些簡單的動畫，我會推薦用這個擴充就好。

安裝

前往 Animate.css 官網 Installation and Usage 查看。

我是使用 CDN 安裝

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

基本使用

在安裝完 Animate.css 後，加上 class animate__animated 到元素上，伴隨著任何的動畫名稱 (別忘了 animate__ 前綴!):

滑到動畫名稱，點擊複製。
animated name

<h1 class="animate__animated animate__bounce">An animated element</h1>
就是這樣！你已經有一個 CSS 動畫的元素。 Super!

其他進階的用法，請參考 Animate.css 文件 。

觀看次數: 885
animateanimationcss動畫
按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁
每週分享資訊技術
Enjoy 享受軟體

一杯咖啡的力量，勝過千言萬語的感謝。

支持我一杯咖啡，讓我繼續創作優質內容，與您分享更多知識與樂趣！