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

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

Gao

Founder

8/11/2024

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

介紹

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

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

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

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

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

查看結果：

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

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

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

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

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