CSS 偏移属性-之路教程

CSS offset 属性值说明

值	描述
offset-position	指定偏移路径的初始位置。
offset-path	指定要遵循的元素的移动路径。
offset-distance	指定偏移路径的位置。
offset-anchor	沿偏移路径定义盒子的锚点。
offset-rotate	指定元素的方向。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

offset: offset-position/offset-path/offset-distance/offset-anchor/offset-rotate | initial | inherit;

偏移属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      @keyframes move {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      div {
        width: 60px;
        height: 60px;
        background-color: #8ebf42;
        offset: path("M 100 100 L 300 100 L 200 300 z") auto;
        animation: move 4s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Offset 属性示例</h2>
    <div></div>
  </body>
</html>

CSS 偏移属性

offset 属性沿指定路径为元素设置动画。

它是以下属性的简写属性：

offset-position
offset-path
offset-anchor
offset-rotate
offset-distance

在早期的规范中，偏移属性被称为“运动”。

该特性是一项实验技术。

初始值	自动无0自动自动
应用于	可变形元素。
继承	无效
可动画的	是的。
版本	运动路径模块级别1
DOM 语法	object.Style.Offset =“auto”;

日期：2020-06-02 22:14:41 来源：oir作者：oir

←CSS offset-rotate 属性

CSS :only-child 伪类→

CSS offset 属性值说明

语法

偏移属性示例：

目录