摘要：还记得我前端刚入行的第一课，就是手写轮播图。那个时候感觉很难并且要写很多js逻辑代码，才能实现出一个最基础的轮播。
还记得我前端刚入行的第一课，就是手写轮播图。那个时候感觉很难并且要写很多 js 逻辑代码，才能实现出一个最基础的轮播。
每次想到那些复杂的 JavaScript 逻辑，我都心生敬畏。
现在好了，Chrome 135 带来新特性，借助 CSS Overflow 5 规范，单靠 CSS 就能整出超多酷炫轮播特效，不用再写繁琐的 JavaScript 代码。
想用 CSS 实现各种炫酷的轮播效果，先给大家介绍 ::scroll-button 和 ::scroll-marker 这两个伪元素！
滚动按钮（::scroll-button）是一种有状态、交互式的滚动功能按钮。
它可以帮助用户轻松访问内容，按下时可使滚动区域滚动 85%。
对于一次仅显示一个全宽项且具有滚动贴靠点的轮播界面，此值会按项显示；而对于长列表，它会滚动到几乎整页的位置。
滚动标记（::scroll-marker）类似于页内链接，每个标记都可以表示滚动条中的任何项。
它们不仅提示轮播界面的大小，还允许用户快速跳转到特定位置。滚动标记具有以下特点：
包含一个 :target-current 状态，用于表示标记在视野内或已固定。支持键盘导航，其行为类似于 focusgroup。提供屏幕阅读器体验，并以标签页列表的形式生成报告。基于这两个新功能，开发者可以创建出 100 多种不同的轮播特效。
以下列举部分示例：
水平轮播
这是最为常见的轮播形式，内容沿着水平方向滚动展示。
通过简单的 CSS 设置，即可创建一个基本的水平滚动区域。这种轮播方式常用于图片展示或产品推荐，用户可以轻松地左右滑动查看不同内容。
视频轮播
视频轮播主要用于展示多个视频预览，用户可以方便地在不同视频之间切换。
与常规图片轮播不同，视频轮播需要优化视频加载及播放连贯性，确保流畅的观看体验。
应用切换器轮播
应用切换器轮播在展示多个应用或大型项目资料时非常方便，用户可以从不同角度浏览信息。
产品展示轮播
产品展示轮播在电商网站上应用广泛，它能够全方位展示产品的细节和特点。
3D 轮播
3D 轮播通过独特的视觉效果，将内容以三维形式呈现给用户。
这种轮播方式常用于吸引用户注意，需要更精细的设计和优化以确保在各种设备上都能流畅运行。
纵向 3D 滚动轮播
纵向 3D 滚动轮播为用户提供了更独特的视角和交互体验，内容以纵向 3D 的方式展示，适合用于创意设计展示或吸引用户注意力的场景。
Chrome 团队仍在持续优化这些功能，并计划在未来支持更多自定义选项，例如周期性滚动（像旋转木马一样循环播放）等功能。这将进一步提升轮播界面的灵活性和用户体验。
来源：不秃头程序员
