AUTO · 自动演示
参数调改
PLAYGROUND
底块颜色--base_color
高光颜色--highlight_color
扫过周期--dur_ms
6004000
圆角半径--radius_px
024
光带角度--sweep_deg
70130
实现要点
NOTES- 01
高光是 50% 宽的 ::after 光带做 translateX 位移扫描,比 background-position 动画少重绘、走合成器路径。
- 02
骨架元素统一继承同一套 ::after 规则,形状只靠尺寸与圆角区分,新增占位块零成本。
- 03
高光色必须带透明度叠在底色上才有『扫过』感;底色要比页面背景亮一档,避免整块隐身。
- 04
所有占位块 overflow:hidden + 圆角,光带斜切(--sweep_deg)比 90 度垂直扫更有质感。
- 05
长列表场景可在外层容器加 content-visibility:auto,屏外骨架不参与渲染;reduced-motion 下隐藏光带、保留静态色块表达加载语义。
源代码
SOURCE
加载源代码…