纯 CSS 也能实现 3d 轮播图！

文章预览

最近在项目中碰到一个比较典型的 3d 轮播图动效，如下所示 说难不难，说简单也不简单，这是一个无限循环的轮播效果，并且个数是固定的，你会如何实现呢？ 原效果是通过 vue 的 transition 组件实现的，感觉有些笨重，思考了一番，发现纯  CSS 也能实现这样的效果，而且性能更好，实现也更简洁，一起来看看吧 一、CSS 动画实现思路 首先来分析一下思路。看着是一个连贯的轮播效果，其实单独看每一个子项，都是完全相同的运动轨迹。 然后是这个动画，其实就是 6 个关键帧，逐一去位移和缩放，如下 然后给每个子项不同的“负延迟”，是不是就刚好错开，形成一个完整的轮播效果了呢？ 无论 CSS 怎么实现，动画原理就这些了，下面来看几个实现方式 二、CSS 动画关键帧 首先简单布局一下，先用一个元素实现动画 < div class = " item " > div > 加点修 ………………………………