@jh3yy: 我们做了个新东西……有些细节虽然能感受到，但或许常被忽略

我们做了个新东西……

有些细节能感受到，但或许容易被忽略。

预加载器是 SVG 点阵 + 内联 CSS 自定义属性的组合。

延迟、速度、漂移、轨迹、发光效果，全部在渲染时处理。

通过负延迟让它从一开始就活跃起来。

顺便提一句：强烈建议创建原型时，把配置状态存进 URL 里。

这样协作和迭代都很方便，只需分享一个 URL！

我们快速创建原型，然后像快速链接一样互相传递。

主标题文字并不是“打字”效果。

视觉字符通过 CSS 延迟 + 滚动状态切换可见性来实现。

没有 DOM 变动，只有编排好的渐变透明度过渡。

导航药丸图标在滚动时显现，是一个小型状态机。

:hover / :focus-visible 触发打开。

采用堆叠的 CSS 网格过渡，因此无需测量内容尺寸。

[aria-expanded=true] → grid-template-rows: 1fr

附注：这里通过将容器作为触发器（此处内边距做了一定的夸大）来提供一个小小的 :hover 操作提示。

这样可以避免用户意外关闭等不想要的状态。

（作为延伸，可以了解一下菲茨定律）

导航链接的下划线使用了小小的 CSS 缩放技巧。

在 X 轴上从 0 缩放到 1。 通过切换 transform-origin 来实现进入和退出效果。

一个不错的小细节。

视频模态框使用了视图过渡。

棘手的部分不在于视频的形态变化，而在于确保正确的覆盖层行为。

这意味着导航也需要一个视图过渡，以及一些 z-index 来避免根据滚动位置产生的冲突。

卡片文本的揭示效果是渐进增强的 CSS 滚动触发淡入，无需 JavaScript。

CSS view-timeline 将 –scroll-reveal 从 0 切换到 1， 然后触发 opacity 和 translate 过渡。

–scroll-reveal-index 增加交错效果，并且我们会响应式更新以匹配视觉网格。

我们在这个小型媒体轮播上也做了一些渐进增强。

CSS 滚动驱动的动画与 scroll-snap 配合得很好，并且驱动了缩放效果。

共用一个工具提示更感觉更简洁。

跟随光标，根据指针速度倾斜，在链接之间变形。

更少的 DOM，更少的监听器。

能预渲染的就预渲染。保持 DOM 稳定。动画使用浏览器喜欢的属性。

在打磨细节之前先做好无障碍支持。然后让那些小细节显得顺理成章。

整个团队在这件事上做得很好。 更多技术细节解析请查看主帖 ↓

这是很有趣的一件事。有趣的是，今天早些时候还在手机上给别人演示过。

我们很快会有另一版，当然会包含其他值得关注的点！