tilt · 01
透视倾斜
鼠标移入时整体绕 Y 轴旋转 7 度、绕 X 轴抬起 4 度并上浮 3px，适合需要一点手感的商品卡。
-7° / 4°
Media / 05
图片懒加载 · 预览 · 裁剪
图片加载有三个容易露怯的时刻：还没到、正在到、已经到了。用骨架块占住位置可以避免页面跳动，预览与裁剪则把「看一眼」和「改一改」拆成两步。
灰色占位块 · 三阶段
.sk / .sk-line① 等待加载
0%
占位块与真实图片同宽同高，呼吸动画提示「内容还在路上」，页面高度不会因图片到达而跳动。
② 渐显中
62%
图片解码完成后叠在占位块之上并提升不透明度，两百毫秒左右的过渡即可，过慢会让人以为卡住。
③ 已加载
100%
云杉绿针织衫 · 正面
2048 × 2048 · 486 KB
此时占位块完全撤出，标题与尺寸信息补齐，用户能确认「就是这张」。
缩略图网格
18 张 · 首屏 6 张素材库 · 秋冬系列
已加载 6 / 18
前六张已在首屏内完成加载，其余以骨架块占位；滚动到可视区域时再替换为真实图片，可省下大部分首屏带宽。
图片预览
主预览 + 元信息 + 比例适配点击查看原图
不同比例的预览容器
1:1
方形 · 头像与商品主图
4:3
横版 · 图文内页配图
16:9
宽屏 · 视频封面与首屏
3:4
竖版 · 海报与种草图
3D 倾斜卡
.tilt:hovertilt · 02
素材预览卡
配合 300ms 的过渡曲线，倾斜过程不会显得突兀；触屏设备上没有悬停态，退化为普通卡片。
transition 300ms
tilt · 03
使用建议
同屏只让少数卡片具备倾斜效果，否则视线会被反复拖走；表单与表格行不要使用。
克制使用
图片裁剪
.crop-box / .crop-mask / .crop-win
待裁剪原图 · 2048 × 1280
.sk灰色占位块，呼吸动画 1.6s 循环；.sk-line 补上 11px 高度与下间距，.sk-circle 转为圆形
.tilt悬停时的三维倾斜，需自行补过渡时长（推荐 300ms）与 transform 相关工具类
.crop-box裁剪容器，需自备宽高比与圆角裁切；内部两层分别是原图与遮罩
.crop-win虚线窗口，宽高各占容器 60%，四周 9999px 的巨大阴影负责把窗口外压暗