Chrome 新特性：幾行 CSS 實現 100 多種輪播特效！
還記得我前端剛入行的第一課，就是手寫輪播圖。那個時候感覺很難并且要寫很多 js 邏輯代碼，才能實現出一個最基礎的輪播。
每次想到那些復雜的 JavaScript 邏輯，我都心生敬畏。
現在好了，Chrome 135 帶來新特性，借助 CSS Overflow 5 規范，單靠 CSS 就能整出超多酷炫輪播特效，不用再寫繁瑣的 JavaScript 代碼。
想用 CSS 實現各種炫酷的輪播效果，先給大家介紹 ::scroll-button() 和 ::scroll-marker() 這兩個偽元素！
1. 滾動按鈕（::scroll-button()）
滾動按鈕（::scroll-button()）是一種有狀態、交互式的滾動功能按鈕。
它可以幫助用戶輕松訪問內容，按下時可使滾動區域滾動 85%。
對于一次僅顯示一個全寬項且具有滾動貼靠點的輪播界面，此值會按項顯示；而對于長列表，它會滾動到幾乎整頁的位置。
.carousel::scroll-button(left) {
content: "?" / "Scroll Left";
}
.carousel::scroll-button(right) {
content: "?" / "Scroll Right";
}
.carousel::scroll-button(*)::focus-visible {
outline-offset: 5px;
}2. 滾動標記（::scroll-marker()）
滾動標記（::scroll-marker()）類似于頁內鏈接，每個標記都可以表示滾動條中的任何項。
它們不僅提示輪播界面的大小，還允許用戶快速跳轉到特定位置。滾動標記具有以下特點：
- 包含一個 :target-current 狀態，用于表示標記在視野內或已固定。
- 支持鍵盤導航，其行為類似于 focusgroup。
- 提供屏幕閱讀器體驗，并以標簽頁列表的形式生成報告。
.carousel {
scroll-marker-group: after;
}
.carousel > li::scroll-marker {
content: ' ';
}
.carousel > li::scroll-marker:target-current {
background: var(--accent);
}3. 多種輪播特效展示
基于這兩個新功能，開發者可以創建出 100 多種不同的輪播特效。
以下列舉部分示例：
(1) 水平輪播
這是最為常見的輪播形式，內容沿著水平方向滾動展示。
通過簡單的 CSS 設置，即可創建一個基本的水平滾動區域。這種輪播方式常用于圖片展示或產品推薦，用戶可以輕松地左右滑動查看不同內容。
(2) 視頻輪播
視頻輪播主要用于展示多個視頻預覽，用戶可以方便地在不同視頻之間切換。
與常規圖片輪播不同，視頻輪播需要優化視頻加載及播放連貫性，確保流暢的觀看體驗。
(3) 應用切換器輪播
應用切換器輪播在展示多個應用或大型項目資料時非常方便，用戶可以從不同角度瀏覽信息。
(4) 產品展示輪播
產品展示輪播在電商網站上應用廣泛，它能夠全方位展示產品的細節和特點。
(5) 3D 輪播
3D 輪播通過獨特的視覺效果，將內容以三維形式呈現給用戶。
這種輪播方式常用于吸引用戶注意，需要更精細的設計和優化以確保在各種設備上都能流暢運行。
(6) 縱向 3D 滾動輪播
縱向 3D 滾動輪播為用戶提供了更獨特的視角和交互體驗，內容以縱向 3D 的方式展示，適合用于創意設計展示或吸引用戶注意力的場景。
4. 優勢與好處
- 無需 JavaScript ：減少了代碼復雜度，提高了性能。
- 無障礙功能支持 ：內置的無障礙功能讓輪播界面更加友好。
- 性能優化 ：無需加載和執行 JavaScript 代碼，頁面的加載速度和運行性能得到顯著提升。
- 開發效率提高 ：CSS 的代碼相對簡潔直觀，開發輪播界面更加便捷快速。
Chrome 團隊仍在持續優化這些功能，并計劃在未來支持更多自定義選項，例如周期性滾動（像旋轉木馬一樣循環播放）等功能。這將進一步提升輪播界面的靈活性和用戶體驗。
總之，Chrome 135 推出的 CSS Overflow 5 規范中的輪播界面功能為網頁設計帶來了重大變革。
開發者可以利用這些新特性輕松打造出豐富多樣的輪播特效，無需依賴 JavaScript，同時兼顧性能和無障礙功能。
- 官方更多案例：https://chrome.dev/carousel
- 在線輪播配置器：https://chrome.dev/carousel-configurator/
