css 路径动画

• use::

  css motion path

  梗概

  • offset-path：接收一个 [use::SVG 路径]（与 SVG 的path、CSS 中的 clip-path 类似），指定运动的几何路径
  • offset-distance：控制当前元素基于 offset-path 运动的距离
  • offset-position：指定 offset-path 的初始位置
  • offset-anchor：定义沿 offset-path 定位的元素的锚点。 这个也算好理解，运动的元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动
  • offset-rotate：定义沿 offset-path 定位时元素的方向，说人话就是运动过程中元素的角度朝向

  示例

  div:nth-child(2) {
      width: 40px;
      height: 40px;
      background: linear-gradient(#fc0, #f0c);
      offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
  }
  @keyframes move {
      0% {
          offset-distance: 0%;
      }
      100% {
          offset-distance: 100%;
      }
  }

  

  指向原始笔记的链接