僅用 CSS 的無限滾動轉盤動畫

介紹#

我們當然喜歡 JavaScript。但是只是用 CSS 來看看我們可以實現什麼總是很有趣的——尤其是在涉及到動畫時，因為 CSS 動畫通常比 JavaScript 動畫要“輕”。

在這篇文章中，我將向你展示如何只用 CSS 創建一個具有懸停暫停效果的無限滾動轉盤動畫。以下是我們將要構建的內容預覽：

創建一排卡片#

首先，讓我們創建轉盤的基本結構。考慮一排卡片：

看起來不錯吧？這些卡片可以是你的精美橫幅、產品圖像或你想在轉盤中展示的任何內容。

複製卡片#

由於我們希望轉盤是無限的，它應將結尾和開頭連接起來。我們可以試著重複這些卡片：

查看結果：

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

為轉盤添加動畫#

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

我們還有最後一個小細節需要添加：當懸停在轉盤上時暫停動畫。這將給用戶一個更清楚地查看內容的機會。由於我們有兩組卡片，我們需要在懸停時一起暫停兩組卡片：

就是這樣！ 🎊 現在當你懸停在轉盤上時，效果會暫停。

最後的想法#

CSS 是強大的，總是很有趣去探索我們可以用它實現什麼效果。還有其他 CSS 屬性如 scroll-snap-type 和 scroll-snap-align 可以幫助你創建一個互動性的轉盤。編碼愉快！ 🚀