前端开发：使用CSS offset属性实现图片沿SVG路径运动

前端开发：使用CSS offset属性实现图片沿SVG路径运动

引用

CSDN

1.

https://blog.csdn.net/weixin_45208537/article/details/144445780

本文将介绍如何使用CSS的offset属性使图片沿SVG路径运动。通过offset-path、offset-anchor、offset-distance和offset-rotate等属性，可以实现元素沿指定路径的精确控制。

offset-path

这 offset-path CSS 属性指定元素要遵循的路径，并确定元素在路径的父容器或 SVG 坐标系中的位置。路径是一条线、一条曲线或一个几何形状，元素沿着它进行定位或移动。

这 offset-path 属性与 offset-distance、 offset-rotate和 offset-anchor 属性来控制元素沿路径的位置和方向。

使用方法：

offset-path: path('M-70,-40 C-70,70 70,70 70,-40'); /* 给图片添加svg运动路径 */
offset-path: content-box; /* 跟随内容区域运动 */
offset-path: padding-box; /* 跟随内边距形状运动 */
offset-path: border-box; /* 跟随边框形状运动 */

offset-anchor

这 offset-anchor CSS 属性指定沿 offset-path 这实际上是沿着这条路前进。给予一些元素运动曲线是的位置如：方块相对于运动曲线右上

使用方法：

offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

offset-distance

offset-distance 在运动曲线上的偏移距离

使用方法：

offset-distance: 50%;

offset-rotate

offset-rotate 指的是给添加offset-path元素运动时候的旋转的方向

默认值auto

数值90deg

使用方法：

offset-rotate:auto;
offset-rotate: 90deg;

代码演示

<div class="box blueBox"></div>
<style>
  body {
    width: 300px;
    height: 200px;
    border-radius: 50px;
    border: dashed aqua;
    border-width: 25px;
    padding: 25px;
    margin: 50px;
  }
  .box {
    width: 40px;
    height: 20px;
    animation: move 8000ms infinite ease-in-out;
  }
  .blueBox {
    background-color: blue;
    offset-path: border-box;
    offset-distance: 5%;
  }
  @keyframes move {
    0%,
    20% {
      offset-distance: 0%;
    }
    80%,
    100% {
      offset-distance: 100%;
    }
  }
</style>

兼容性