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 文件

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

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

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