这是一款用浏览器原生 View Transitions API + 一组 `` 实现的便当格局图片切换特效：三张风景图铺在一个 2 列 2 行的网格上，默认第一张占大格、另外两张各占小格；点击任意一张小图，它会平滑放大成主图，原来的主图缩回小格，位置对调整个过程由浏览器接管，脚本只有 13 行。整段无框架、无外部依赖，字体使用 Google Fonts 的 Space Grotesk，背景为奶油色 `#fff6de`，是极简科技风 Bento 卡片的标准范式。
这款便当切换动画的核心亮点
切换逻辑是纯 CSS：`input:checked + .box { grid-row: 1/-1; grid-column: 1; }` 让被选中的图直接跨越整列，其他图按 DOM 顺序自动填充剩下的两个格子，不用任何布局脚本。
过渡由 View Transitions API 接管：脚本只在 radio 的 click 里包一层 `document.startViewTransition(() => { e.target.checked = true })`，剩下的关键帧、位置插值、圆角保持都是浏览器自动完成。
每张图挂了独立的 `view-transition-name: box-1/2/3`，浏览器就知道「主图变小图、小图变主图」是同一元素在移动，而不是消失+新建，切换过程中图片内容不闪烁。
缓动曲线用 `cubic-bezier(0.47, 1.64, 0.41, 0.8)`，末段带一点回弹，视觉上比线性或标准 ease 更有弹性；持续时间 0.5s 足够看清位置交换又不拖泥带水。
View Transitions 与传统方案的三个差别
其一，传统的图片交换要么用绝对定位手动计算 top/left，要么用 FLIP 手动测量再补偿；View Transitions 让浏览器在渲染前给旧 DOM 拍一张快照、渲染后给新 DOM 拍一张，然后在同一个位置对两张快照做补间，开发者只需要标记「谁是谁」。其二，View Transitions 是 CSS 层面的动画，主线程被阻塞时也不会掉帧，比 JS 每帧改样式更稳。其三，浏览器不支持时（Firefox 尚未全量启用），脚本会走 `if (!document.startViewTransition) return`，直接原生切换 checked，功能不会破坏——这是渐进增强的典型样板。源码中均有注释可查看完整实现。
如何换成自己的图或调整格局
三张图片写在三个 `.box` 的 `background-image: url(...)` 里（约第 24、38、52 行），换成自己的图片路径即可；要加到 4 张或 5 张，只需复制一组 `` + `
浏览器兼容性：View Transitions API 需 Chrome 111+、Edge 111+、Safari 18+；Firefox 尚未启用（截至 2026 年 1 月），会静默降级为无动画切换，radio 状态本身仍然生效。详细运行方法请参见压缩包内的帮助文档。
常见问题
能加更多图片扩展成 5 宫格吗
能。CSS Grid 会按 DOM 顺序自动铺格，你只需要按现有规律复制 input+label、给新 label 加 `data-index="4"` 并配上 `view-transition-name: box-4`，格局按需调整 `grid-template-*`。
Firefox 用户看到的效果是什么
点击后主图直接切换，没有位置补间。功能上完全能用，只是少了那一段 0.5s 的动画。
切换时图片有明显闪一下怎么办
通常是同一张图两处 `view-transition-name` 冲突或漏加。检查每张图是否用了唯一的 name；如果确实需要重复，用 `view-transition-name: none` 显式关闭。
可以搭配 SPA 路由用吗
可以。View Transitions API 的调用方式一致，React Router / Vue Router 里同样可以在路由切换回调中包一层 `document.startViewTransition`，图片对应同名后能在页面之间做过渡。
适合放在哪些页面
适合极简作品集封面、产品详情页的图片切换区、旅拍/摄影主题的 Bento 布局、SaaS 官网的功能预览网格。下载源码即可作为独立模块嵌入任何 HTML/框架项目。
