借助 :has 实现3D轮播图

,这次带来一个比较常见的案例，3d 轮播图，就像这样的：,,这个轮播图有几个需要实现的点：,这次借助:has来实现这样的功能，相信可以带来不一样的思路，一起看看吧！,温馨提醒：兼容性要求需要 Chrome 101+，并且开始实验特性（105+正式支持），Safari 15.4+，Firefox 官方说开启实验特性可以支持，但是实测并不支持。,这一部分才是重点。,首先我们来简单布局一下，假设HTML是这样的：,为了尽可能减少复杂度，我们可以将所有的变化都集中在一个类名上。,比如.current​表示当前选中项，也就是中间的那项。这里采用绝对定位的方式，将所有卡片项都堆叠在一起，然后设置3d​视图，将卡片的Z​轴往后移动一段距离，让.current在所有卡片的最前面，实现近大远小的效果，具体实现如下：,效果如下：,,其实层级是这样的，可以在 Chrome 图层中看到：,,现在，我们需要让相邻左右两边的都漏出来，右边的比较容易，用相邻兄弟选择器​​+​​就可以了,那相邻左边的呢？以前是无解的，只能通过 JS 分别设置不同的类名，非常麻烦，但现在有了​​:has​​伪类，也可以轻松实现了，如下,效果如下：,,不过还有一些临界情况，比如在第一个卡片时，由于前面没有兄弟节点了，所以就成了这样。,,所以需要再在第一个元素时，把最后一个元素放在它的左边，第一个元素是:first-child​，最后一个元素是:last-child，所以实现是这样的（最后一个元素处理同理）。,这样就处理好了边界情况。,,进一步，还可以向两侧露出两个卡片，实现也是类似的，完整实现如下：,这样就实现了关于.current的全部样式处理了，只用一个变量就控制了所有变化。,,有了上面的处理，接下来的逻辑就非常简单了，只需要通过js动态控制.current的变化就行了。,一般情况下，我们可能会想到用定时器setInterval，但这里，我们也可以不使用定时器，借助 CSS 动画的力量，可以更轻松地完整这样的交互。,要做的事情很简单，给容器添加一个无关紧要的 CSS 动画。,这样就得到了一个时长为3s，无限循环的动画了。,然后，监听animationiteration​事件，这个事件在动画每次运行一次就会回调一次，在这里也就是每3s​运行一次，就像setInterval的功能一样,在animationiteration​回调中处理.current​逻辑，很简单，移除当前的.current​，给下一个添加.current，注意一下边界就行了，具体实现如下：,使用animationiteration的最大好处是，可以直接通过 CSS 进行动画的控制，再也无需监听鼠标移入移出事件了。,效果如下（方便演示，速度调快了）。,,点击切换，我其实最先想到的是通过:checked，也就是类似单选，比如：,但是目前来看​​:has​​伪类貌似不支持多层嵌套，比如下面这条语句。,.item:has(:checked)选中的是子元素被选中的父级，然后.item:has(+.item:has(:checked))表示选中它的前面一个兄弟节点，这样就能实现选中功能了，可惜现在并不支持（以后可能支持）。,没办法，只能通过传统方式来实现，直接绑定监听click事件。,效果如下：,,完整代码可以查看线上 demo：CSS 3d scroll (codepen.io)[2]或者CSS 3dscroll(runjs.work)[3]。,以上就是借助:has伪类来实现一个3d轮播图的全部细节了，所有的视觉变化全部在 CSS 中完成，JS 只需要处理切换逻辑就行了，相比以前而言，实现上更加简洁和优雅，下面总结一下。,:has非常强大，目前唯一的缺陷在于兼容性。好在浏览器对于这一新特性跟进的都比较积极，明年这个时候差不多可以在内部项目用起来了。,​[1]GlobalEventHandlers.onanimationiteration - Web API 接口参考 | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationiteration_event。,[2]CSS 3d scroll (codepen.io): https://codepen.io/xboxyan/pen/PoeGjdg。,[3]CSS 3dscroll(runjs.work): https://runjs.work/projects/6a42a4c284e4442c。​