animate.css 是一個非常流行的動畫庫,為前端開發人員提供了許多精美的動畫效果。然而,加載這個庫可能會影響您的網站性能,我們可以使用 CDN(內容分發網絡) 來緩解這個問題。
首先,我們需要引用 animate.css 的 CDN。我們可以在頁面的頭部或底部添加以下代碼:
<link rel="stylesheet" />
在這個例子中,我們使用 jsDelivr 的 CDN。注意,這個 URL 中的“npm”是指引用 animate.css 的最新版本。您也可以使用特定版本的 URL 地址。例如,如果您想使用 4.1.1 版本,那么您可以將上面的 URL 更改為:
<link rel="stylesheet" />
現在,animate.css 已經可以從 CDN 獲取了,接下來需要為您的 HTML 元素添加動畫類。每個動畫都有一個類名,您可以在 animate.css 的文檔中找到。例如,要向一個元素添加淡入效果,您可以將它的 class 屬性設置為animate__animated animate__fadeIn
。注意,animate__animated
是必須的。
總結一下,使用 animate.css 的 CDN 加載可以有效地緩解網站性能問題。只需使用簡單的 HTML 元素類名,就可以添加精美的動畫效果。
上一篇bs4 json化
下一篇html 導航欄間隔設置