马黑黑 发表于 2026-7-29 19:38

CSS offset-path 属性之几何图形路径

<style>
    @import 'https://638183.freep.cn/638183/web/css/hl.css';
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; max-width: 65vw; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
    .artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
    .artBox p { margin: 10px 0; }
    .artBox table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
    .artBox th, .artBox td { padding: 8px 10px; border: 1px solid #999; }
    .artBox th { text-align: center; background: #eee; }
    .tMid { text-align: center; }
    .hlCode { padding: 0;}
    #stage { width: 640px; height: 400px; border: 1px solid gray; position: relative; margin: 30px auto 0; }
    #stage::before { position: absolute; content: attr(data-code); width: 100%; height: 100%; display: grid; place-items: center; }
    #fish { width: 80px; height: 40px; transition: 0.5s; position-anchor: right center; background: url('https://638183.freep.cn/638183/web/svg1/fish.svg') no-repeat center/cover; position: absolute;}
    #pathSet p { cursor: pointer; }
    @keyframes move {
      from { offset-distance: 0%; }
      to { offset-distance: 100%; }
    }
</style>

<div class="artBox">
    <p>CSS offset-path 属性值除了可以使用来源于 SVG 的 path 函数、ray 函数赋值，还可以使用 SVG 基本图形充当函数赋值。基本图形函数制作的路径更易理解、代码更简洁。</p>
    <table>
      <caption><h2 class="tMid">offset-path 属性基本图形函数</h2></caption>
      <tr>
            <th width="60">序号</th>
            <th width="100">函数</th>
            <th>语法</th>
            <th>备注</th>
      </tr>
      <tr>
            <td>1</td>
            <td>circle（圆）</td>
            <td>circle(r at x y)</td>
            <td>r ：半径，x、y </td>
      </tr>
      <tr>
            <td>2</td>
            <td>ellipse（椭圆）</td>
            <td>ellipse(rx ry at x y)</td>
            <td>rx、ry ：x和y轴半径，x、y ：圆心位置</td>
      </tr>
      <tr>
            <td>3</td>
            <td>inset（内矩形）</td>
            <td>inset(top right bottom left )</td>
            <td>支持单值、多值表达，支持圆角</td>
      </tr>
      <tr>
            <td>4</td>
            <td>polygon（多边形）</td>
            <td>polygon(x1 y1, x2 y2, ..., xn yn)</td>
            <td>坐标数据支持数值、百分比</td>
      </tr>
      <tr>
            <td>5</td>
            <td>xywh（矩形路径）</td>
            <td>xywh(x y width height )</td>
            <td>x、y ：矩形左上角坐标，width、height ：矩形宽高，支持圆角</td>
      </tr>
    </table>
    <div id="stage" class="hlCode" data-code="offset属性值(待选择)">
      <div id="fish"></div>
    </div>
    <p><strong>⬇️ 选择动画路径：</strong></p>
    <div id="pathSet"></div>
</div>

<script>
    const shapes = {
      circle: 'circle(200px)',
      ellipse: 'ellipse(300px 150px)',
      inset: 'inset(40px round 15%)',
      polygon: 'polygon(10% 10%,90% 50%,10% 90%)',
      xywh: 'xywh(40px 40px 86% 80% round 15%)',
    };
   
    const frg = new DocumentFragment();
    for (let key in shapes) {
      const p = document.createElement('p');
      p.textContent = `\u2714\ufe0f${key} ：`;
      p.title = `点击运行 ${key} 图形路径动画`;
      p.onclick = () => {
            fish.style.animation = '';
            fish.style.setProperty('offset-path', `${shapes}`);
            setTimeout( () => {
                fish.style.setProperty('animation', 'move linear 8s');            
            }, 500);
            stage.dataset.code = `offset-path: ${shapes};`;
      };
      const code = document.createElement('code');
      code.textContent = shapes;
      code.classList.add('hlCode');
      p.appendChild(code);
      frg.appendChild(p);
    }
   
    pathSet.appendChild(frg);
</script>

红影 发表于 2026-7-29 21:22

offset-path 属性基本图形倒也不多，容易记的。
感谢黑黑的耐心讲解，学习了{:4_187:}

红影 发表于 2026-7-29 21:25

一般用得较多的应该是圆、椭圆、多边形吧，内矩形和矩形好像用得少，因为多边形也能做矩形。

马黑黑 发表于 2026-7-29 21:27

红影 发表于 2026-7-29 21:22
offset-path 属性基本图形倒也不多，容易记的。
感谢黑黑的耐心讲解，学习了

SVG基本图形也不多，然后，能用于 offset-path 的图形还不全

马黑黑 发表于 2026-7-29 21:27

红影 发表于 2026-7-29 21:25
一般用得较多的应该是圆、椭圆、多边形吧，内矩形和矩形好像用得少，因为多边形也能做矩形。
是的。但是，inset 矩形参数少，而且较早版本的现代浏览器也完好支持，好用

霜染枫丹 发表于 2026-7-30 16:03

马老师下午好！您这个帖子我挺喜欢的，因为对我挺好用

，我可以用来做一些素材，有了这个办法，做起来得心应手。我昨晚试着做了一个，就是觉得你那条鱼有点丑{:4_189:}改成了我用AI重新做的小锦鲤，效果忒别灵动。还可以是花瓣，可以是树叶，可以是我能想到的所有。那三个圆圈我还没试
谢马老师的分享，夏安！{:4_204:}{:4_190:}

马黑黑 发表于 2026-7-30 21:26

霜染枫丹 发表于 2026-7-30 16:03
马老师下午好！您这个帖子我挺喜欢的，因为对我挺好用

，我可以用来做一些素材，有了这个办法，做起来得 ...

鱼无美丑，味鲜则好

杨帆 发表于 2026-7-30 23:41

很实用的教程，谢谢马老师直观、细致的讲解{:4_190:}

马黑黑 发表于 2026-7-31 07:59

杨帆 发表于 2026-7-30 23:41
很实用的教程，谢谢马老师直观、细致的讲解

{:4_190:}
页: [1]
查看完整版本: CSS offset-path 属性之几何图形路径