Geoff Graham

CSS 冥想 #1：如果代码按预期工作并且符合你的心理模型，那么它就是完美的。

经典技巧

经久不衰的 CSS 宝藏

文章 于 2021 年 10 月 6 日发布 滚动动画 Chris Coyier 文章 于 2021 年 10 月 6 日发布 黄色闪光 Chris Coyier 文章 于 2021 年 10 月 6 日发布 自绘制形状 Chris Coyier 文章 于 2021 年 10 月 6 日发布 滚动阴影 Chris …

CSS ::view-transition-image-pair 伪元素是视图过渡 API 的一部分，它允许我们选择视图过渡中的“前后”快照。

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

…

CSS ::view-transition-image-new 伪元素是视图过渡 API 的一部分，它允许我们选择视图过渡中过渡到的“新”快照。

::view-transition-image-new(*) {
  animation-duration: 700ms;
}

…

CSS ::view-transition-image-old 伪元素是视图过渡 API 的一部分，它允许我们选择视图过渡中的“之前”快照。

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

…

CSS :popover-open 伪类是弹出框 API 的一部分，它选择 popover 元素，并在弹出框处于“打开”状态时对其进行样式设置。

/* Select any open popover */
:popover-open {
  /* Styles */
}

/* Select 

…

::view-transition-group 伪元素选择一个或多个容器，这些容器对单个视图过渡的各个部分进行分组。

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

你看到伪元素参数中的 transition-name 标识符了吗？这就是我们可以选择特定视图过渡的方式。视图…

CSS 容器查询的主要思想是将一个元素注册为“容器”，并在容器元素满足特定条件时对其他元素应用样式。

CSS ::view-transition 伪元素是顶级（或“根”）元素，包含页面上定义为 CSS 视图过渡的所有动画过渡。

::view-transition {
  position: fixed;
  inset: 0;
}

…