你可以找到很多基于JavaScript的滑塊插件免費上網。這些功能非常好，并且支持所有現代瀏覽器，但是現在您可以用純CSS復制其中的大部分功能。
每個旋轉木馬都有自己的風格，所以沒有最好的方法來建造一個。但我收集了10個最好的開源代碼片段，可以作為自己的旋轉木馬的模板。
這些設計的風格和行為各不相同，但它們都運行在純CSS代碼上。
Netflix Show旋轉木馬
這個Netflix旋轉木馬是非常獨特的與懸?？s放動畫效果為每個視頻。旋轉木馬中的鏈接不在任何地方，但你可以很容易地嵌入這些鏈接來處理視頻。
因為這個版本只使用CSS，所以更難包含動態效果，比如視頻模式窗口。但是你仍然可以使用它來創建一個在所有瀏覽器中都能很好地使用Netflix風格的懸停動畫的滑塊。
帶注釋的線性旋轉木馬
有些旋轉木馬使用注釋在每張幻燈片上添加字幕和額外的上下文。你可以通過克隆復制這種效果這支筆用純HTML/CSS代碼編寫。
沒有箭頭或點導航元素，所以整個過程都是點擊/觸摸控制的。只需單擊旋轉木馬的右側或左側，您將立即前進到該側。這是無限旋轉的，所以你永遠都不會到達終點。
每個轉換都有一個小的褪色效果，這也是通過CSS控制的。這一切都是非常令人印象深刻的，作為一個簡單的UI模板工作得很好。
褪色旋轉木馬
這里有一個稍微干凈一點的褪色旋轉木馬用戶界面其中包括了小點導航以及兩邊的箭頭。這是通過CSS完全控制的，其中箭頭的工作方式類似于單選按鈕。
每個HTML收音機輸入都連接到不同的圖像，因此您可以單擊以輕松瀏覽它們。淡出效果也通過CSS和mixin從這個Sass圖書館用于旋轉木馬
響應式幻燈片
這是另一個由CSS控制的單選按鈕滑塊和一些添加的標題。但這支筆是由Vo Tuan Trung創作的完全響應并且可以在任何現代瀏覽器中工作。
所有CSS都是用Sass編寫的，它使用波旁威士忌mixins庫提供額外功能?；瑒觿赢嫺鶕热菀苿拥姆较蛳蜃蠡蛳蛴移揭?。這是一個很酷的效果，而且非常詳細，只在CSS代碼上運行。
CSS3推薦滑塊
定制推薦是登陸頁面和公司網站的主要內容。這個推薦滑塊易于實現，使用非常輕量級純CSS動畫 .
這些元素遵循現代和簡單化的設計方法。沒有太多的顏色，質感，或額外的設計風格。
如果你想要更詳細的檢查這支筆開發商莎拉蘇伊丹。它有點緊湊，但也有更多的設計風格。
相框
你可以用CSS轉換和關鍵幀動畫做很多事情。還有這個相框動畫顯示了你可以做多少只是一個簡單的滑塊。
每張照片都會以簡單的滑動動畫效果移動到兩側。你可以添加照片，無論大小，因為即使是框架是由純CSS。很酷吧？
暗色用戶界面
你可能會喜歡一個更黑暗的例子此CSS滑塊建立在一個黑暗的背景之上。它使用明亮的綠色高光來吸引注意力和強大的字幕動畫。
這個滑塊是難以置信的簡單使用，加上動畫是一流的。事實上，CSS3的運行非常令人印象深刻。我們真的生活在網頁設計的黃金時代！
CSS圖像轉盤
與這個圖像旋轉木馬只需幾行代碼就可以更改很多內容。設計非常簡單，它使用CSS在照片周圍創建一個小框架。
這是為數不多的不涉及動畫的旋轉木馬之一，因此過渡是粗糙和直接的。
但是它只使用少于100行的CSS，而且沒有Sass代碼，所以很容易將其復制/粘貼到任何布局中。
純CSS3旋轉木馬
如果你想要一個固定大小的圖像滑塊一個干凈的起點，然后檢查這個設計赫里奧·馬孔德斯
在一個非常簡單的動畫中，每個背景都隨文本旋轉。同樣，這是相當短的，只有大約80行CSS和幾十行HTML。
我想說，這是創建純CSS旋轉木馬的最簡單的模板之一。這當然不是完美的，但它提供了一個很好的起點。
文本旋轉木馬
文本旋轉木馬可以很好地為推薦或各種引用在主頁上。如果你想避免混亂的JS代碼，你可以使用這個旋轉文字轉盤用純CSS構建
每個文本塊都有自己的動畫循環，遵循五個不同引號的模式。您可以通過添加/刪除CSS類來增加或減少這個數量，這使得它更易于編輯。
如果你想找一個只提供文本的旋轉木馬，那就去看看吧這個例子馬修·赫希
這些是我能在網上找到的最好的例子，但我知道還有很多其他的例子。如果你想找更多的話，看看旋轉木馬標簽 在CodePen上。
18868949445
QQ客服
