::view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

::view-transition CSS 伪元素表示视图过渡叠加层的根元素，它包含所有视图过渡且位于所有其他页面内容的顶部。

在视图过渡期间，::view-transition 包含在相关的伪元素树中，如视图过渡过程中所述。它是该树的顶级节点，并且有一个或多个 ::view-transition-group 子节点。

::view-transition 在 UA 样式表中具有以下默认样式：

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

所有 ::view-transition-group 伪元素都相对于视图过渡根元素定位。

语法

css
::view-transition {
  /* ... */
}

示例

css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}

规范

Specification
CSS View Transitions Module Level 1
# selectordef-view-transition

浏览器兼容性

BCD tables only load in the browser

参见