CSS offset-anchor 属性-之路教程

语法

offset-anchor: auto | <position>;

offset-anchor 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #ccc;
        padding: 0 50px;
        width: 100%;
      }
      svg,
      .box {
        position: absolute;
      }
      .box {
        animation: move 3s 0ms infinite alternate ease-in-out;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        height: 50px;
        width: 50px;
        offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-anchor 属性示例</h2>
    <svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
      <path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
    </svg>
    <div class="box"></div>
  </body>
</html>

CSS offset-anchor 属性

offset-anchor 属性定义框沿偏移路径的锚点。
一个偏移路径被认为是一个没有样式化的基本形状的几何图形，或者一个由一个或者多个子路径组成的路径。
锚点指定框的点，即沿偏移路径移动的点。

这种偏移特性是一种实验技术。

初始值	auto
应用于	可变形元素。
继承	无效
可动画的	是的。
版本	运动路径模块级别1
DOM 语法	object.style.offsachor ="right top";

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

←CSS object-position 属性

CSS offset-distance 属性→

语法

offset-anchor 属性示例：

目录