css offset路径动画

单羽童

已于 2025-03-21 22:12:20 修改

阅读量1.2k

点赞数 24

文章标签： css 前端

于 2025-03-21 21:56:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54188159/article/details/146429157

版权

offset-* CSS 属性说明

offset-* 是一组与元素沿着路径移动相关的 CSS 属性。规范的早期版本将此属性称为motion，它们通常用于创建动画效果，使元素沿着特定路径（例如贝塞尔曲线、射线或其他自定义路径）进行移动。offset-* 属性组合可以让我们控制元素在路径上的位置、角度、路径类型等，常用于 CSS 动画、复杂的布局和互动效果中。

1. offset-path

offset-path 属性用于定义一个路径，元素将沿此路径进行动画或运动。路径可以是以下几种类型：

1. 默认值

offset-path: none;

描述：这是默认值，表示元素不会沿任何路径移动，即没有路径。

2. 线段（ray）

offset-path: ray(45deg closest-side contain);

描述：定义一条射线（直线）。这条射线的起始点为元素的位置，按指定角度（如 45deg）扩展。参数 closest-side 和 contain 指定射线延伸至元素的最近边并限制在元素的边界内。

offset-path: ray(contain 150deg at center center);

描述：定义一条射线，从元素中心开始，按 150deg 的角度延伸，contain 表示它被限制在元素的边界内。

offset-path: ray(45deg);

描述：定义一条射线，从元素当前位置出发，按 45deg 角度延伸。没有指定其他约束，射线会无限延伸。

3. URL

offset-path: url(#myCircle);

描述：路径是由一个外部定义的图形（比如 SVG 形状）给出的。#myCircle 参考的是一个 SVG 元素的 ID，路径将沿着该图形的轮廓移动。

4. 基本形状

offset-path: circle(200px at 50% 50%);

描述：定义一个圆形路径，圆心位于元素的 50% 50% 位置，半径为元素宽高的 50%。
circle() 是一种用于定义路径的 offset-path 函数，它用来指定一个圆形路径。其参数可以控制圆形的大小和位置。

语法：

offset-path: circle(<radius> at <position>);

参数说明：

:
- 描述：圆形的半径，决定了圆的大小。
- 类型：可以是百分比或长度值（如 px, em 等）。如果是百分比，表示相对于元素的尺寸进行计算。
- 示例：
  - 50% 表示半径为元素尺寸的 50%。
  - 100px 表示半径为 100 像素。
at (可选):
- 描述：指定圆形路径的圆心位置。位置是相对于元素的 position 进行设置的。
- 类型：可以是两组值：和。可以使用百分比值或长度值（如 px、em 等）。
  - 是水平位置，决定圆心在元素宽度方向上的位置。
  - 是垂直位置，决定圆心在元素高度方向上的位置。
- 示例：
  - at center center：圆心位于元素的中心。
  - at 25% 25%：圆心位于元素宽高的 25% 位置。
  - at 10px 20px：圆心位置为元素的 10px（水平）和 20px（垂直）。

示例：

在这里插入图片描述

圆形路径，半径为元素宽高的 200px 且圆心位于元素的中心：

   offset-path: circle(200px at 50% 50%);

offset-path: ellipse(50% 50% at 25% 25%);
offset-path: url(#ellipse);

 <svg width="100%" height="100%">
        <ellipse cx="50%" cy="50%" rx="100" ry="50" fill="none" id="ellipse" stroke-dasharray="5 5"  stroke-width="2px" stroke="pink"/>
    </svg>

描述：定义一个椭圆路径，椭圆的中心在元素的 25% 25% 位置，长轴和短轴分别为元素宽高的 50%。

`ellipse()` 参数解析

ellipse() 是 offset-path 属性的一个值，用于定义椭圆形路径，让元素沿椭圆路径移动。其语法如下：

offset-path: ellipse(<rx> <ry> at <cx> <cy>);

参数说明

参数	含义	示例
`<rx>`	椭圆的水平半径，可以是长度值（px、em 等）或百分比	`50%`、`100px`
`<ry>`	椭圆的垂直半径，可以是长度值或百分比	`30%`、`50px`
`at`	指定椭圆的中心点位置	必须加 at
`<cx>`	水平中心点，可以是长度值或百分比，默认 `50%`	`50%`、`200px`
`<cy>`	垂直中心点，可以是长度值或百分比，默认 `50%`	`50%`、`100px`

示例解析

1. 标准椭圆路径

offset-path: ellipse(100px 50px at 50% 50%);

✅ 解释：

水平半径 100px，垂直半径 50px。
椭圆中心点位于父元素的 50% 50%（即中心）。
效果：元素沿着 横向 200px、纵向 100px 的椭圆路径运动。

2. 以父元素尺寸为基准的椭圆

offset-path: ellipse(50% 30% at 50% 50%);

✅ 解释：

水平半径 50%：等于父元素宽度的一半。
垂直半径 30%：等于父元素高度的 30%。
中心点 50% 50%：椭圆中心在父元素中心。
效果：椭圆的大小随父元素大小变化，是一种自适应的路径。

3. 自定义中心点

offset-path: ellipse(80px 40px at 25% 75%);

✅ 解释：

水平半径 80px，垂直半径 40px。
椭圆中心点位于 父元素的 (25%, 75%) 处（靠左下角）。
效果：元素沿着左下角的椭圆路径运动。

4. 只写半径，不写 `at`

offset-path: ellipse(100px 50px);

✅ 解释：

省略 at 时，默认椭圆中心点在 50% 50%（即父元素中心）。

offset-path: inset(100px 100px 100px 100px);
/*说白了就是上下左右都按照比父元素小100px切出的矩形运动*/

在这里插入图片描述

描述：定义一个内切矩形路径，矩形的内切区域从元素的中心向四个方向扩展 50%。

 .box {
            width: 40px;
            height: 40px;
            background-color: pink;
            clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
            border-radius: 100%;
            offset-path: url(#polygon);
            animation: move 4s linear infinite;
        }
        @keyframes move {
            0% {
                offset-rotate: 0deg;
                offset-distance: 0%;
            }
            100% {
                offset-rotate: 360deg;
                offset-distance: 100%;
            }
        }

 <svg width="100%" height="100%">
        <!-- <path id="path" d="M 50 300 Q 200 100, 350 300 T 1250 300"></path> -->
        <!-- <circle cx="50%" cy="50%" r="100" fill="none" id="circle" stroke-dasharray="5 5"  stroke-width="2px" stroke="pink" /> -->
        <!-- <ellipse cx="50%" cy="50%" rx="100" ry="50" fill="none" id="ellipse" stroke-dasharray="5 5"  stroke-width="2px" stroke="pink"/> -->
        <polygon points="150,20 180,110 270,110 195,160 220,250 150,200 80,250 105,160 30,110 120,110" 
        fill="none" id="polygon" stroke="pink" stroke-width="4" stroke-dasharray="8 8"/>

    </svg>
    <div class="box"></div>

在这里插入图片描述

描述：定义一个多边形路径，具体的顶点位置通过百分比指定，形成一个自定义的多边形路径。

offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");

描述：自定义 SVG 路径，使用 M（移动到）、Q（二次贝塞尔曲线）等命令定义复杂的曲线路径。

offset-path: rect(100px 100px 100px 100px round 20px);
/*round就是svg中rect rx属性即border-radis*/
offset-path: url(#rect);

 <rect stroke-dasharray="5 5"  stroke-width="2px" fill="none" rx="20px" stroke="pink" x="100" y="100" width="100" height="100" id="rect">

在这里插入图片描述

描述：定义一个矩形路径，矩形的四个边分别为 100px，并且角落是圆角，圆角半径为 20px。

offset-path: xywh(0 5px 100% 75% round 15% 0);

描述：定义一个矩形路径，矩形的位置和大小通过 xywh 格式指定，round 参数指定圆角。

5. 坐标盒模型

offset-path: content-box;
offset-path: padding-box;
offset-path: border-box;
offset-path: fill-box;
offset-path: stroke-box;
offset-path: view-box;
/*说白了父元素这几个盒子模型有多大就按照父元素边界运动
fill-box
指 SVG 中的对象边界框。在 CSS 中，fill-box被视为content-box。它用于将内容包裹在coord-box值定义的边缘周围。
stroke-box
指 SVG 中的描边边界框。在 CSS 中，stroke-box被视为border-box。它用于定义应用描边时元素的形状。
view-box
指最近的 SVG 视口元素的原点框。原点框是一个矩形，其宽度和高度与viewBox该元素的属性建立的初始 SVG 用户坐标系相同。原点框的定位方式是，其左上角锚定在坐标系原点。在 CSS 中，view-box被视为border-box。*/

描述：这些是定义路径的几种盒模型方式，分别对应：
- content-box：内容区域
- padding-box：包含内边距区域
- border-box：包含边框区域
- fill-box：包含填充区域
- stroke-box：包含描边区域
- view-box：包含视口区域

6. 全局值

offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: revert-layer;
offset-path: unset;

描述：这些是 CSS 中的全局值，用于继承、重置或取消对 offset-path 的设置：
- inherit：继承父元素的值
- initial：设置为属性的初始值
- revert：恢复到上层样式（即父元素或浏览器默认样式）
- revert-layer：恢复到当前层级样式
- unset：重置为继承值或初始值，取决于属性是否可继承

这些 offset-path 的不同值允许元素沿着各种路径移动，从简单的直线到复杂的曲线、形状和区域，让动画和路径动画变得更为灵活。

示例：

.box {
    /* offset-path: url(#path); 或者通过url id引用svg path路径*/
    offset-path: path('M 50 300 Q 200 100, 350 300 T 1250 300');
}

此代码定义了一个贝塞尔曲线路径，元素将沿这个路径运动。

2. offset-distance

offset-distance 控制元素在路径上的当前位置，值为百分比（0% 到 100%），表示从路径的起始点到当前点的相对位置。

0% 表示路径的起始位置。
100% 表示路径的结束位置。
中间值表示沿路径的某个特定位置。

示例：

.box {
    offset-distance: 50%; /* 元素在路径中间 */
}

在这里插入图片描述

此代码使得 .box 元素沿路径移动到路径的中间位置。

3. offset-rotate

offset-rotate 用于控制元素在路径上的旋转。它决定了元素的旋转角度，使其与路径方向对齐。

auto：元素会自动旋转以匹配路径的切线方向。
angle：指定固定的角度（例如 45deg），元素将始终保持该角度。

示例：

.box {
 　　/* offset-distance: 50%; */
    offset-rotate: auto; /* 元素会自动旋转以跟随路径 */
}

/*反转*/
 offset-rotate: reverse;

在这里插入图片描述

/*旋转角度*/
 offset-rotate: 90deg;

在这里插入图片描述

4. offset-anchor

offset-anchor 用于定义元素在路径上的锚点位置，决定元素的起始点在哪个位置。

auto：默认行为，元素的锚点位于元素的中心。
position：可以指定锚点的位置，例如使用 left, right, top, bottom 来定义。

示例：

.box {
    offset-anchor: auto; /* 默认情况下，锚点是元素的中心，大白话解释就是子元素中的点对其路径 
    top left 就是子元素左上角对其路径,20px 20px就是子元素中坐标20,20的点对其路径*/
    
}

5. offset-position

offset-position 属性用于设置元素相对于其路径的偏移位置。它可以指定一个相对位置（例如 30% 70%），影响元素在路径上的具体起始点。

示例：

.box {
    offset-position: 30% 70%; /* 设置元素在路径上的起始位置 */
}

这会将元素的位置设置为路径的起始点的 30% 和 70% 位置。

6. ray() 路径类型

ray() 是 offset-path 的一种路径类型，表示一条从元素位置出发的射线。元素将沿着指定的角度和距离沿射线延伸。可以指定射线的角度（angle）和长度（size）。

示例：

.box {
    offset-path: ray(90deg 200px); /* 射线从元素的当前位置出发，角度为 90°，长度为 200px */
}

小结

通过组合这些 offset-* 属性，可以让元素沿路径平滑移动，创建丰富的动画效果。它们为设计师提供了一种简单的方法来创建与路径相关的动画，而无需依赖 JavaScript 或复杂的动画库。

总结表格

属性	作用描述	示例
offset-path	定义元素沿路径的移动方式	offset-path: path(‘M 50 300 Q 200 100, 350 300’)
offset-distance	控制元素在路径上的位置	offset-distance: 50%
offset-rotate	控制元素沿路径的旋转角度	offset-rotate: auto
offset-anchor	设置元素在路径上的锚点位置	offset-anchor: auto
offset-position	设置元素相对于路径的偏移位置	offset-position: 30% 70%
ray()	定义射线路径，元素沿指定角度和距离移动	offset-path: ray(90deg 200px)