最近被一个作品展示类的页面逼了一把：产品经理提了个硬需求——不要传统那种一张大图左右横切的轮播图，要有“卡片感”，中间主卡完整展示，旁边的卡片缩小、半透明、错位露出，手指划过的时候一层一层跟上去，看起来要优雅。说白了就是现在很多官网和 App 里常见的HTML/CSS/JS实现的“优雅卡片滑块轮播图”。
这种交互做出来并不难，真正麻烦的是细节。最初我也以为只要堆几个transform配合transition就能收工，结果从布局、动画、拖拽到无限循环、移动端适配，前后打磨了两天，中间踩了不少坑，也把很多“想当然”的地方重新理顺了。这篇文章把完整思路和一套可以直接跑的代码记录下来，适合已经会基础前端、想把轮播图认认真真做成精品组件的人。文章会先讲清楚卡片滑块的视觉逻辑，再给整体布局、核心数学公式、拖拽跟手、无限循环和线上适配，最后聊聊这套组件还能延伸到哪里。
1. 先想清楚：卡片滑块到底比传统轮播图多解决了什么问题
1.1 传统轮播图最常见的“割裂感”从哪里来
做前端这些年，我写过太多种轮播图。最早是直接切大图，后来做带小圆点、带箭头的 Banner，再后来是缩略图联动。这些方案的共同点是：画面与画面之间是一种“替换关系”——旧图退出、新图进来，用户看到的是两个完整页面的拼接，中间信息断层。
这种断层在图片型 Banner 上还好，因为看大图本身就是目的。但一旦承载的是卡片式的信息单元，比如团队成员介绍、讲师名片、作品封面、商品推荐，问题就暴露了：用户会想对比相邻卡片，想知道“后面还有什么”，而传统轮播图把相邻卡片藏得干干净净，观众只能在“完全未知”和“单张可见”之间来回跳动。
1.2 卡片滑块的真正价值：不是“滑动”，而是“层次”
卡片滑块轮播图的视觉核心不是移动，而是层级关系。正在看的主卡在最前面、最完整、最醒目；左右两侧各露出一部分次卡，缩小、降透明、往后“退”；再远一点的卡片就更小、更淡，直至看不见。这个结构有点像站在一排人群前，你自然会聚焦在最靠近的那个人身上，但余光还有左右两个人的轮廓。
这种设计带来的直接好处是：用户能感知空间和数量——“原来后面还有三四张”“右边那张我大概瞥到封面了”。对产品来说，这就等于在有限屏幕里多了一层信息引导。比如作品展示场景，主卡显示完整大图，右侧露出下一张作品的一角，用户不用点箭头就有“再滑一下看下一张”的冲动，浏览转化率会有肉眼可见的提升。
1.3 我总结出的适用边界
不是所有轮播都适合卡片滑块。我试过把它用在新闻标题轮播上，效果反而不如简单切换，因为文本信息密度高，缩小和半透明会损伤可读性。比较合适的场景有：
- 作品集/案例展示：每张卡有主视觉图，用户愿意看“轮廓”猜内容；
- 人物/团队成员卡片：头图加姓名职称，卡片本身信息轻量；
- 电商分类/商品推荐位：通过露出相邻商品制造“再逛一下”的氛围；
- 营销活动主视觉：需要氛围感和设计感，卡片错位本身就很有装饰性。
不合适的场景包括：大段文字公告、强对比数据报表、长文本详情页。信息密度一高，错位缩放的优雅感就会变成阅读障碍。
2. 核心布局：一个视口、一条轨道、五张卡片
2.1 HTML 结构设计：让语义、层级和命名一次到位
我最终采用的是“视口 + 轨道 + 卡片列表”的三段式结构，这也是实现卡片滑块最自然的一种形态。
<div class="carousel" id="carousel"> <div class="carousel__viewport" id="viewport"> <ul class="carousel__track" id="track"> <li class="carousel__slide"> <div class="slide-card" style="background-color: #7c9cff;"> <span>01</span> <p>作品封面</p> </div> </li> <li class="carousel__slide"> <div class="slide-card" style="background-color: #78d6c1;"> <span>02</span> <p>项目概览</p> </div> </li> <li class="carousel__slide"> <div class="slide-card" style="background-color: #ffc07c;"> <span>03</span> <p>团队成员</p> </div> </li> <li class="carousel__slide"> <div class="slide-card" style="background-color: #b58cf2;"> <span>04</span> <p>过程记录</p> </div> </li> <li class="carousel__slide"> <div class="slide-card" style="background-color: #f28c8c;"> <span>05</span> <p>成果展示</p> </div> </li> </ul> </div> <button class="carousel__btn carousel__btn--prev" id="prevBtn" aria-label="上一张">‹</button> <button class="carousel__btn carousel__btn--next" id="nextBtn" aria-label="下一张">›</button> </div>几点说明：
viewport是“剪辑窗口”，所有卡片都会跑到它外面去，但只有窗口里的内容可见；track本身不负责滑动，它只是一个语义容器，真正的位移全部作用在每一张slide上，这一点和传统思路不同；- 每张
slide内部再放一个.slide-card，为的是把“卡片本身样式”和“卡片在轨道中的位置状态”解耦，后面加阴影、圆角、内边距都不影响定位逻辑； - 按钮放在视口外面，用绝对定位浮在左右两端，方便后面做无障碍键盘操作。
2.2 CSS 视角：为什么打死不用 left/top 做动画
布局上我踩过一个老坑：一开始想省事，用left和opacity移动卡片，结果在低端安卓机上滑动明显掉帧，肉眼可见的卡顿。原因得从渲染机制说起。
改变left或top会触发浏览器的 Layout（布局计算），接着是 Paint（绘制），最后才到 Composite（合成）。这一整条流水线每一帧都要重跑；而transform和opacity的变化不需要重新布局，现代浏览器会直接把元素提到合成层处理，整个过程只走 Composite。就好比搬家具分两条路：一条是每次都要重新量房间尺寸再搬，另一条是地板已经铺好，直接把家具“平移”过去。显然后者更快，尤其在移动端。
所以我的 CSS 基线定成这样：任何与“位置/大小/透明度”相关的动态变化，一律用transform和opacity完成。卡片的缩放也是transform: scale()，而不是改width/height。
2.3 用 CSS 变量管理卡片尺寸与间距
卡片滑块最怕的事就是“改个尺寸要翻三处代码”。我的做法是把关键尺寸抽成 CSS 变量，挂在.carousel上：
.carousel { --card-width: 280px; --card-gap: 24px; --card-height: 360px; --slide-step: calc(var(--card-width) + var(--card-gap)); }--slide-step是相邻两张卡片定位中心之间的距离。这个值在 JS 里也要用，所以后面我会在初始化时读取它，而不是两套数字各写各的，不然十有八九会对不上。
主卡居中时的水平偏移量比较特殊：如果视口宽度是W，卡片宽度是280px，主卡要水平居中，它的translateX应该是(W - 280) / 2。旁边卡片相对于主卡再偏移一个--slide-step。这个“居中偏移量”也要在初始化时算出来，存进 JS 的状态里。
3. 滑动效果的数学引擎：偏移量、缩放、透明度怎么配合
3.1 每张卡片的状态由“相对索引差”决定
卡片滑块看起来复杂，实际上每一张卡片的渲染只取决于一个数字：它和当前中心卡片的索引差。
假设当前展示的卡片索引为current，列表里有n张卡片。对于第i张卡片，计算：
let diff = i - current;当diff = 0，它就应该位于主卡位置，放大 1 倍、透明度 1；当diff = 1，它应该完整出现在右侧次卡位置，稍微缩小、半透明；diff = -1就在左侧，对称处理；diff = 2或更远，继续缩小变淡。
这个思路把所有复杂的布局状态简化为一条线性映射：
- 水平位移：
x = 主卡居中偏移 + diff * slideStep - 缩放：
scale = maxScale - |diff| * scaleStep - 透明度：
opacity = 1 - |diff| * opacityStep
我用的是最大缩放 1，最小 0.7，每次差 0.15；透明度从 1 递减 0.35，最淡到 0.3。这几个参数不是拍脑袋定的，是实际试出来的：缩小太多会失去“副卡”的识别度，太小又会让用户觉得卡片消失得太突然。
3.2 归一化取模：让第一张和最后一张也“相互靠近”
上面这套逻辑有个致命问题：当用户在第 0 张向左滑时，diff = -1的应该是最后一张，但如果直接算0 - 1 = -1，那最后一张的索引是n-1，diff = n-1-0 = n-1，会被当成“很后面的卡片”，一路缩小到看不见。
处理办法是对diff做归一化，把差值映射到[-n/2, n/2]的区间里。我封装了一个函数：
function getDiff(i, current) { let diff = i - current; const n = slides.length; while (diff > n / 2) diff -= n; while (diff < -n / 2) diff += n; return diff; }这就像钟表拨指针：从 12 点逆时针拨一格，实际是到了 11 点，而不是 6 点。用这样的diff渲染，第一张和最后一张在视觉上就“相邻”了，无限循环的地基就此打下。
3.3 动画节奏：cubic-bezier 参数与过渡时长的选择
过渡动画最容易看出“廉价感”。我开始用的ease确实能动，但总感觉像弹簧没拉住，甩过头又弹回来，不适合高级感强的页面。后来换成苹果系常用的缓动曲线：
.carousel__slide { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease; }cubic-bezier(0.22, 0.61, 0.36, 1)的特点是：起步稍慢，中段加速，接近终点时速度明显放缓，带一点“阻尼收住”的感觉。时长 0.45 秒也是调出来的：太短显得急促，太长会让连续快速操作时动画堆叠、拖泥带水。如果页面里卡片更大、移动距离更长，可以适当加到 0.5 秒，但不建议超过 0.6 秒。
4. 一套能直接跑的完整 Demo：代码结构和逐段解释
上面把数学引擎讲清楚了，下面给一套完整可运行的结构。这段代码我尽量保持最小依赖，不引库，纯原生。
4.1 HTML 结构：直接用前面那段结构
前面第二小节已经给了完整 HTML。实际使用时把卡片内容替换成自己的图片、标题、描述就行。这里提醒一个小点：li最好不要直接放文本，里面套一层.slide-card，后面给卡片做圆角、阴影、内边距都会更干净。
4.2 CSS：视口、卡片和按钮的基础样式
.carousel { position: relative; width: 100%; max-width: 1200px; margin: 40px auto; --card-width: 280px; --card-gap: 24px; --card-height: 360px; --slide-step: calc(var(--card-width) + var(--card-gap)); --max-scale: 1; --min-scale: 0.7; --max-opacity: 1; --min-opacity: 0.3; } .carousel__viewport { overflow: hidden; padding: 30px 0; cursor: grab; touch-action: pan-y; } .carousel__track { margin: 0; padding: 0; list-style: none; } .carousel__slide { position: absolute; top: 0; left: 0; width: var(--card-width); height: var(--card-height); will-change: transform, opacity; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease; } .slide-card { width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; color: #fff; user-select: none; }几个关键点：
position: absolute让所有卡片脱离文档流，这样才能用transform自由摆位；viewport加了padding: 30px 0，给卡片阴影留出渲染空间，否则顶部阴影会被裁剪掉一截；touch-action: pan-y很重要，它告诉浏览器：垂直方向的手势仍然交给页面滚动，水平方向才由我们处理，不然在手机上拖轮播图时页面会跟着抖动；will-change提示浏览器提前给卡片分配合成层，动画更顺，但不要滥用，数量多会吃内存，这几张卡片没问题。
4.3 JS：初始化、状态更新和渲染函数
const viewport = document.getElementById('viewport'); const slides = Array.from(document.querySelectorAll('.carousel__slide')); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const n = slides.length; let current = 0; let centerOffset = 0; let slideStep = 0; const maxScale = parseFloat(getComputedStyle(document.querySelector('.carousel')).getPropertyValue('--max-scale')) || 1; const minScale = parseFloat(getComputedStyle(document.querySelector('.carousel')).getPropertyValue('--min-scale')) || 0.7; const maxOpacity = parseFloat(getComputedStyle(document.querySelector('.carousel')).getPropertyValue('--max-opacity')) || 1; const minOpacity = parseFloat(getComputedStyle(document.querySelector('.carousel')).getPropertyValue('--min-opacity')) || 0.3; function getDiff(i, current) { let diff = i - current; while (diff > n / 2) diff -= n; while (diff < -n / 2) diff += n; return diff; } function measure() { const first = slides[0]; slideStep = first.offsetWidth + parseFloat(getComputedStyle(document.querySelector('.carousel')).getPropertyValue('--card-gap')); centerOffset = (viewport.offsetWidth - first.offsetWidth) / 2; } function render(animate = true) { if (!animate) { track.style.transition = 'none'; } slides.forEach((slide, i) => { const diff = getDiff(i, current); const x = centerOffset + diff * slideStep; const scale = Math.max(minScale, maxScale - Math.abs(diff) * 0.15); const opacity = Math.max(minOpacity, maxOpacity - Math.abs(diff) * 0.35); slide.style.transform = `translate3d(${x}px, 0, 0) scale(${scale})`; slide.style.opacity = opacity; }); if (!animate) { // 强制浏览器先应用当前状态，再恢复过渡 void track.offsetWidth; track.style.transition = ''; } } function goTo(index, animate = true) { current = ((index % n) + n) % n; render(animate); } function next() { goTo(current + 1); } function prev() { goTo(current - 1); } prevBtn.addEventListener('click', prev); nextBtn.addEventListener('click', next); window.addEventListener('resize', () => { measure(); render(); }); measure(); render(false);measure()是关键初始化步骤，我在窗口尺寸变化时也会调用，让卡片和间距改变后重新计算步长和居中偏移。
4.4 为什么初始渲染要关掉动画
注意到render(false)了吗？这个细节很重要。如果初始状态带着transition，页面加载那一刻，所有卡片会从初始位置（左上角）开始做一个“位移动画”冲到正确位置上，用户会看到一次明显的闪烁和乱跳。所以首次渲染必须先关闭过渡、摆好正确位置、再恢复过渡。后面的无限循环跳转也会再次用到这个技巧。
5. 拖拽与触摸滑动的落地：从点按到“跟手”
按钮切换只是基础版，真正让这个组件显得优雅的是“可以直接用手指拖”。这一节我把从鼠标事件到触摸事件的完整链路拆开讲。
5.1 鼠标事件、触摸事件与指针事件的统一
现在主流浏览器基本都支持 Pointer Events，用一套pointerdown/pointermove/pointerup就能同时覆盖鼠标、触摸和触控笔，代码比早年监听mouse和touch两套事件干净得多。我的实现只监听指针事件。
let isDragging = false; let startX = 0; let startCurrent = 0; let hasMoved = false; let lastX = 0; let lastTime = 0; viewport.addEventListener('pointerdown', (e) => { isDragging = true; hasMoved = false; startX = e.clientX; startCurrent = current; lastX = e.clientX; lastTime = performance.now(); viewport.setPointerCapture(e.pointerId); }); viewport.addEventListener('pointermove', (e) => { if (!isDragging) return; const dx = e.clientX - startX; if (!hasMoved && Math.abs(dx) > 6) { hasMoved = true; } if (hasMoved) { current = startCurrent - dx / slideStep; render(false); } });核心逻辑是把鼠标横移的像素距离换算成“虚拟索引”：移动了slideStep像素，就相当于滑动 1 张卡片。current在拖动过程中允许是小数，比如1.35，渲染函数照常用它计算每张卡片的diff，这样卡片会精确停在半路上，手指停在哪，卡片就停在哪，这就是“跟手”的来源。
setPointerCapture的作用是把指针事件锁定到视口元素上，即使光标移出视口也能继续收到移动事件，避免拖到一半“断指”。
5.2 拖拽过程中必须先禁用 CSS transition
这个坑我第一版就踩了。拖拽时如果不关闭transition，每一帧都会出现“动画追不上手指”的滞后感，视觉上特别黏糊。所以我在地板上涨了个知识：动画只在“松手后”的吸附阶段使用，拖动阶段用render(false)实时摆位，等松手后再交还给过渡动画。
5.3 松手吸附的算法：距离和速度双判断
松手后的去向不能只按四舍五入。如果你的手指以很快的速度向左甩了 20 像素，但目标离下一张只差一点点，按距离四舍五入可能还是回到原卡，体验就很“面”。所以我用“距离 + 速度”双判据来决定吸附到哪张。
viewport.addEventListener('pointerup', (e) => { if (!isDragging) return; isDragging = false; if (!hasMoved) return; const dx = e.clientX - startX; const dt = Math.max(performance.now() - lastTime, 1); const velocity = dx / dt; let target = Math.round(current); const threshold = 0.18; if (Math.abs(dx) > slideStep * threshold) { target = Math.round(current + Math.sign(dx) * (Math.abs(dx) > slideStep * 0.5 ? 1 : 0.5)); } if (Math.abs(velocity) > 0.4) { target = Math.round(current + Math.sign(velocity)); } goTo(target); });需要解释的是current可能是小数，比如1.35，当速度足够时Math.round(current + 1)会直接落到 2。goTo内部会做取模循环，所以target越界也不怕。
5.4 这一阶段最容易踩的坑
- 拖拽时触发点击按钮：如果视口内有可点击元素，拖拽结束时可能触发一次误点击。解决办法是在
pointerup里判断hasMoved，如果确实移动过，就e.preventDefault()并忽略本次点击； - 图片被拖拽：卡片里放了图片后，桌面端拖图片会出现半透明幽灵图，破坏交互。给
.slide-card img加上-webkit-user-drag: none; user-select: none;可解决； - 下拉刷新冲突：
touch-action必须按需设置，既不能完全关闭页面滚动，也不能放任横滑。卡片滑块场景用touch-action: pan-y最稳妥； - 快速来回拖动时索引抖动：拖动中的小数
current跨过边界可能瞬间跳变很大，用getDiff归一化后视觉上就不会出现卡片“瞬移”。
6. 无限循环的边界处理办法，不常用的取模方案
6.1 从取模到视觉上的“假无限”
无限循环和之前的归一化渲染是同一套体系。goTo里用：
current = ((index % n) + n) % n;这样current始终落在[0, n-1]，不会越界。配上getDiff之后，比如当前在第 0 张，想往前看，最后一张的diff计算出来是-1，会老老实实出现在左侧次卡的位置，视觉上无缝衔接。
6.2 真正需要警惕的跳变瞬间
无限循环里最危险的是连续快速操作。假设当前在current = 4，用户快速点“下一张”，目标是5，取模后变成0。如果场景中第一张和第零张距离不是物理上的“步长”，动画就会穿帮。但因为所有卡片都是绝对定位并按照diff * slideStep渲染的，第一张和第零张在视觉上是“相邻”的，所以从第 4 张切到第 0 张时，卡片只是从右侧滑向中间，完全看不出是绕了一圈。
还有一个必须处理的瞬间：当current从n-1跳到0时，原第n-1张要瞬间从“右侧主卡”变成“左侧靠后卡片”，中间要跨越n-1个位置。这个跨越如果不做处理，用户会看到它“唰”地飞回去。我的方案是在goTo时判断：如果新旧索引的差值绝对值大于n/2，说明绕了远路，就关闭过渡直接摆好最终位置，再开启过渡。
function goTo(index, animate = true) { const nextIndex = ((index % n) + n) % n; const rawDiff = nextIndex - current; if (Math.abs(rawDiff) > n / 2) { render(false); current = nextIndex; render(false); // 重新打开过渡 requestAnimationFrame(() => render(true)); } else { current = nextIndex; render(animate); } }实际测试下来，这几种边界都能平稳过渡，不会出现飞卡或闪烁。
6.3 自动播放和人工操作的互斥逻辑
自动播放本身很简单，设个setInterval调next()就行。但两个细节要注意：
- 用户拖拽或点击按钮后，自动播放应该“避让”，否则会出现“我往左滑，它却往右跳”的打架现场；
- 鼠标悬停在轮播图上时建议暂停自动播放，桌面端很常见，移动端没有 hover，可以不处理。
我用一个简单的状态机：
let autoTimer = null; let isInteracting = false; function stopAuto() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } } function startAuto(interval = 3000) { stopAuto(); autoTimer = setInterval(() => { if (!isInteracting && !document.hidden) { next(); } }, interval); }在pointerdown时isInteracting = true并stopAuto()，在pointerup后延迟几秒重新startAuto()。我一般延迟 2 秒，避免用户刚松手就被自动播放抢节奏。
7. 上线前必须处理的细节：移动端、响应式与性能
7.1 移动端 Safari 的兼容坑
同样一套代码在 Android Chrome 上没问题，到了 iOS Safari 会出现两个老问题。
一是卡片边缘闪烁。因为缩放加移动会让合成层边缘出现像素锯齿，偶尔还有残影。我给每张卡片加了一个“微透明的边界遮罩”，本质上是给.slide-card加一层outline: 1px solid rgba(255,255,255,0.1)，视觉上几乎没有影响，但能明显降低边缘抖动感。
二是在 iOS 上长按时会出现系统文本选择或连续弹出复制菜单。解决方案是给视口和卡片统一设置：
.carousel__viewport, .carousel__slide { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }7.2 响应式重算：ResizeObserver 比 resize 更可靠
卡片滑块不像普通轮播图那样“图片宽度跟着容器走”，它的卡片宽度由 CSS 变量固定。在桌面端是 280px，到了手机就得变成 220px。我一般用 CSS 媒体查询改--card-width和--card-gap，然后 JS 监听尺寸变化重算。
window.resize有个缺陷：它只在窗口尺寸变化时触发，容器因为旁边面板折叠导致尺寸改变时无感知。更稳妥的是用ResizeObserver观察视口：
const ro = new ResizeObserver(() => { measure(); render(); }); ro.observe(viewport);实测下来，改成ResizeObserver之后，无论容器怎么变，卡片都能立刻重新居中，不会出现主卡偏到一边的情况。
7.3 只动合成属性的性能铁律
我不知道你在优化这种动效时会先查什么，我现在的习惯是先开 Performance 面板录一段 60 秒操作，重点看有没有 Layout 和 Paint 时间远高于 Script。如果render函数里只写了transform和opacity，那么 Layout 时间基本应该是 0。一旦出现 Layout 峰值，检查是不是有地方改了width、left、margin之类的布局属性。
利用 Chrome DevTools 的 Rendering 面板里的 Paint flashing，可以直接看到哪些区域在重绘。我在开发中就是这个流程，改完代码立刻开闪烁检查，凡是看到整块区域闪烁，就是有属性用错了。
7.4 无障碍和键盘操作，这步别省
很多同学做完轮播图就收工，键盘用户只能干看着。卡片滑块至少要做到三件事：
- 左右按钮是真正的
<button>，可以 Tab 聚焦，有aria-label； - 轮播容器设置
role="region"和aria-roledescription="carousel"，再把当前卡片的aria-current="true"动态切换； - 在容器上监听
keydown，左右方向键触发prev/next，并preventDefault()防止页面滚动。
viewport.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); } else if (e.key === 'ArrowRight') { e.preventDefault(); next(); } });不要觉得这是在加戏。我服务过的几个项目都有真实用户反馈，“能用键盘操作”是他们判断一个产品是否值得信任的最基本标准。
8. 我最终留在这个组件里的几个扩展空间
因为做的是通用组件，我没有把代码写死成“只能展示 5 张卡片”。实际项目里，同一个轮播逻辑被我在三个地方复用：作品展示主视觉、团队成员横向滑动、甚至一个简易的封面流导航。共用部分就是measure/render/goTo/getDiff这套核心，每次只换.slide-card内部结构和CSS变量。
如果后面想做得更“活”，我建议尝试几个方向：
- 把索引差映射函数从线性改成曲线，比如让远处的卡片缩得更快、透明度掉得更慢，视觉层次会更丰富，但需要小心不要让太远卡片完全透明后仍占着布局；
- 把拖拽速度做成动量，松手后让卡片按初速度继续滑动一段距离，再吸附到目标，这个效果很接近原生 App 的滚动手感；
- 用同一套
getDiff归一化逻辑，把卡片滑块扩展成多维度的“空间导航”，不只是横向轮播，还能映射成上下错落的卡片墙。
开发过程中我把每一次切换的舒适度都当成“手感”来调，最后发现所谓优雅，其实就是在正确的时机、用正确的曲线、让卡片出现在正确的位置上。很多看似需要复杂动画框架才能做到的交互，原生 HTML/CSS/JS 完全可以胜任，真正值钱的从来不是炫技，而是把一个一个细节抠到让人用着舒服。
