前端|Chrome 新特性：几行 CSS 实现 100 多种轮播特效！

作者：前端开发爱好者

还记得我前端刚入行的第一课，就是手写轮播图。那个时候感觉很难并且要写很多 js 逻辑代码，才能实现出一个最基础的轮播。

每次想到那些复杂的 JavaScript 逻辑，我都心生敬畏。

现在好了，Chrome 135 带来新特性，借助 CSS Overflow 5 规范，单靠 CSS 就能整出超多酷炫轮播特效，不用再写繁琐的 JavaScript 代码。

想用 CSS 实现各种炫酷的轮播效果，先给大家介绍 ::scroll-button() 和 ::scroll-marker() 这两个伪元素！

滚动按钮（`::scroll-button()`）

滚动按钮（::scroll-button()）是一种有状态、交互式的滚动功能按钮。

它可以帮助用户轻松访问内容，按下时可使滚动区域滚动 85%。

对于一次仅显示一个全宽项且具有滚动贴靠点的轮播界面，此值会按项显示；而对于长列表，它会滚动到几乎整页的位置。


css
 代码解读
复制代码
.carousel::scroll-button(left) {
  content: "⬅" / "Scroll Left";
}

.carousel::scroll-button(right) {
  content: "⮕" / "Scroll Right";
}

.carousel::scroll-button(*)::focus-visible {
  outline-offset: 5px;
}

滚动标记（`::scroll-marker()`）

滚动标记（::scroll-marker()）类似于页内链接，每个标记都可以表示滚动条中的任何项。

它们不仅提示轮播界面的大小，还允许用户快速跳转到特定位置。滚动标记具有以下特点：

包含一个 :target-current 状态，用于表示标记在视野内或已固定。
支持键盘导航，其行为类似于 focusgroup。
提供屏幕阅读器体验，并以标签页列表的形式生成报告。


css
 代码解读
复制代码
.carousel {
  scroll-marker-group: after;
}

.carousel > li::scroll-marker {
  content: ' ';
}

.carousel > li::scroll-marker:target-current {
  background: var(--accent);
}

多种轮播特效展示

基于这两个新功能，开发者可以创建出 100 多种不同的轮播特效。

以下列举部分示例：

水平轮播

这是最为常见的轮播形式，内容沿着水平方向滚动展示。

通过简单的 CSS 设置，即可创建一个基本的水平滚动区域。这种轮播方式常用于图片展示或产品推荐，用户可以轻松地左右滑动查看不同内容。

视频轮播

视频轮播主要用于展示多个视频预览，用户可以方便地在不同视频之间切换。

与常规图片轮播不同，视频轮播需要优化视频加载及播放连贯性，确保流畅的观看体验。

应用切换器轮播

应用切换器轮播在展示多个应用或大型项目资料时非常方便，用户可以从不同角度浏览信息。

产品展示轮播

产品展示轮播在电商网站上应用广泛，它能够全方位展示产品的细节和特点。

3D 轮播

3D 轮播通过独特的视觉效果，将内容以三维形式呈现给用户。

这种轮播方式常用于吸引用户注意，需要更精细的设计和优化以确保在各种设备上都能流畅运行。

纵向 3D 滚动轮播

纵向 3D 滚动轮播为用户提供了更独特的视角和交互体验，内容以纵向 3D 的方式展示，适合用于创意设计展示或吸引用户注意力的场景。

优势与好处

无需 JavaScript ：减少了代码复杂度，提高了性能。
无障碍功能支持 ：内置的无障碍功能让轮播界面更加友好。
性能优化 ：无需加载和执行 JavaScript 代码，页面的加载速度和运行性能得到显著提升。
开发效率提高 ：CSS 的代码相对简洁直观，开发轮播界面更加便捷快速。

Chrome 团队仍在持续优化这些功能，并计划在未来支持更多自定义选项，例如周期性滚动（像旋转木马一样循环播放）等功能。这将进一步提升轮播界面的灵活性和用户体验。

总之，Chrome 135 推出的 CSS Overflow 5 规范中的轮播界面功能为网页设计带来了重大变革。

开发者可以利用这些新特性轻松打造出丰富多样的轮播特效，无需依赖 JavaScript，同时兼顾性能和无障碍功能。

官方更多案例：https://chrome.dev/carousel
在线轮播配置器：https://chrome.dev/carousel-configurator/

滚动按钮（::scroll-button()）

滚动标记（::scroll-marker()）