2025 年，我在现代浏览器里重现了 Windows 8 的“开始”屏幕动效

[geelaw]

哔哩哔哩视频 BV1FeGmzUEPX

实现了：

• 带有渐变光影的磁贴（以及磁贴的边线、悬停时的外发光）
• 按压磁贴时根据按压位置有不同的视觉反馈
• 视差滚动（背景和磁贴的滚动速度不同）
• 点击磁贴打开 app 的动画
• 如果用户晕动画，则不显示动画

其中最后一个用了 view transition API，是去年年中的新功能，主要适用的也是单页应用 (single-page application, SPA) 里复杂视图的切换动画：浏览器会计算一部分 DOM 差异，并根据差异播放动画，DOM 的替换是瞬间完成的。

代码可以从这个 GitHub Gist 以 MIT 协议获取。

[Tumblr]

不看！免得我对大佬的膜拜更上一层！！ 🙉

[pike0002]

页面里面资源路径搞成可访问的？不让大家下了看的时候效果不佳

[KMpAn8Obw1QhPoEP]

很强 您真是啥都会啊

[geelaw]

@pike0002 #2 因为那些资源是 Windows 的，所以我无法 relicense ，网上有很多下载的地方，也可以打开 Windows 8 ISO 提取。

[abc8678]

想起了魔方格

[lizhenda]

佩服啊，不过什么样的产品会需要这种效果呢，一下也想不到场景。