MOTION EFFECT
像素转场Pixel Transition
用一片小方格按顺序渐次显隐，完成两个画面之间的像素化切换。ReactBits / Aceternity 都有同族组件。
效果预览
适合用在哪
图片切换、作品集翻页、需要复古像素质感的过场动画。
容易踩的坑
- 格子过少如 4×4 时过渡像马赛克故障，少于 8 列难有像素感。
- 转场超过 800ms 会阻塞翻页操作，用户连续点击时会排队卡顿。
- 两张图尺寸比例不同，切片对不齐会在过渡中出现错位接缝。
设计提示词 · Prompt
像素转场（Pixel Transition）：用 CSS Grid 画 8 列 × 4-5 行、gap 2px 的方格阵列，每格 aspect-ratio:1、圆角 1.5px、底色主色。每格动画 2.6s ease-in-out 无限循环：opacity 从 .12 到 1、scale 从 .85 到 1，用 animation-delay: calc(var(--i) * 55ms) 按索引错开，形成像素逐格点亮的扩散效果。真实转场实现是先把两张图各自切成同样网格，用 clip-path 或 opacity 按索引交叉过渡。
Pixel Transition: use CSS Grid to draw an array of cells, 8 columns × 4-5 rows with a 2px gap; each cell has aspect-ratio:1, border-radius 1.5px, and the primary color as background. Each cell animates 2.6s ease-in-out, infinite: opacity from .12 to 1 and scale from .85 to 1, staggered by index with animation-delay: calc(var(--i) * 55ms), forming a spreading effect where pixels light up cell by cell. A real transition first slices both images into the same grid and cross-fades them by index using clip-path or opacity.
常见搭配
同一页面里经常和「像素转场」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-pixel">
<i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i>
<i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i>
<i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i>
<i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i>
</div>
</div>