繁體中文（香港）
  • css
  • 動畫
  • 無限滾動
  • 輪播

僅使用 CSS 的無限滾動輪播動畫

僅使用 CSS 創建一個無限滾動的輪播動畫，並在懸停時暫停。不需要 JavaScript。

Gao
Gao
Founder

介紹

我們當然熱愛 JavaScript。但看看使用純粹 CSS 可以實現什麼總是很有趣的——尤其是在動畫方面，因為 CSS 動畫通常比 JavaScript 動畫「輕量」得多。

在這篇文章中，我會向你展示如何使用僅 CSS 創建一個帶有懸停時暫停效果的無限滾動輪播動畫。以下是我們即將構建的內容預覽：

A
B
C

創建一行卡片

首先，讓我們創建基礎的輪播結構。考慮一行卡片：

A
B
C

看起來不錯吧？卡片可以是你的精美橫幅、產品圖片，或者你想在輪播中展示的任何內容。

複製卡片

因為我們希望輪播是無限的，它應該是首尾相連的。直覺上，我們可以嘗試重複卡片：

查看結果：

A
B
C

只有第一組卡片可見。如果你查看 HTML，你會看到第二組卡片是隱藏的，緊隨第一組之後。

為輪播添加動畫

是時候為輪播添加動畫了！因為我們有兩組連接的卡片，我們可以通過轉換卡片組來為輪播添加動畫。方法如下：

我們還需要添加最後一個觸摸：當鼠標懸停在輪播上時暫停動畫。這將使用戶有機會更清楚地查看內容。因為我們有兩組卡片，所以當鼠標懸停在輪播上時，我們需要暫停這兩組卡片：

就是這樣！🎊 現在當你懸停在輪播上時，輪播將會暫停。

A
B
C

最後的想法

CSS 很強大，探索我們可以用它實現什麼總是很有趣。 還有其他像 scroll-snap-type 和 scroll-snap-align 這樣的 CSS 屬性，可以幫助你創建交互式輪播。 開心編碼吧！🚀