cosine - 前端人の日常频道

#优质博文 #前端 #CSS #动画 #course
这篇写得真好，offeset-path 讲明白了。
The -path of Least Resistance (Part 2)

AI 摘要：本文从静态形状的剪切路径 (clip-path) 转向运动路径 (offset-path)，系统讲解如何用 offset-distance、offset-anchor、offset-position、offset-rotate 等控制元素沿自定义路径自然运动；阐明 offset transform 在 transform 栈的执行顺序及其对视觉结果与性能的影响；区分闭合与开放路径、负值与溢出距离的行为；展示用 shape() 切分路径与 ray() 创建无限射线；并给出交互触发与可访问性 (prefers-reduced-motion) 的实践建议与性能优化策略。

1. 概念与对比
• 从剪切路径 (clip-path) 的“控形”转向偏移路径 (offset-path) 的“控动”
• 参照系差异：clip-path 相对元素 border-box，而 offset-path 相对包含块 (containing block)
• shape() 浏览器支持度低于 offset-path 与 clip-path

2. 值与坐标
• 支持绝对单位与百分比，适配响应式
• 大量使用 CSS 变量，使路径定义、函数参数、单点坐标可参数化
• 路径静态由 offset-path 定义，位置动态由 offset-distance 驱动

3. 距离与动画
• 核心动画仅需 offset-distance: 0% → 100%
• 非线性运动：通过多关键帧实现往返与停顿
• 可用 transition 在 hover、focus、click 等交互中平滑过渡 offset-distance

4. 锚点与起点
• offset-anchor 决定元素哪个点贴合路径（类似 transform-origin）
• offset-position 决定路径在包含块中的起始位置：normal(居中)、auto(元素自身位置)、或显式坐标

5. 旋转与方向
• offset-rotate 控制沿路径方向的旋转：auto、固定角度、auto 叠加角度、reverse
• 通过 auto 使元素切线对齐，实现自然转向

6. 变换栈与相互关系
• 变换顺序：单独 transform 属性 (translate/rotate/scale) → offset transform → transform
• 相同路径在不同层次的变换组合会产生不同视觉结果

7. 性能考虑
• offset-path 属于 transform 栈，享受硬件加速，避免重排重绘
• 动画中避免改动 offset-path，本应动画 offset-distance；用变量或类切换路径
• 简化路径：简单直线不必用 shape()，circle() 性能优于大量曲段的 path()

8. 闭合与开放路径
• circle()、inset()、polygon() 天生闭合，0% 与 100% 连续循环
• path()、shape() 可开可闭；开放路径 100% 回到 0% 会“跳跃”
• 负值与溢出：闭合路径可环绕归一化，开放路径则钳制在 0%–100%

9. 分段路径与“切割”
• 使用 shape() 的 move 指令在中途打断并重启路径
• 适合制作从一点“传送”到另一点的分段运动效果

10. 无限射线 ray()
• ray(angle) 生成无穷直线；100% 通过关键字定义参照距离：closest-side、closest-corner、farthest-side、farthest-corner、sides
• 始终为开放路径，超过 100% 将无限延伸，适用于飞出屏幕、激光、方向性动画

11. 可访问性与交互
• 尊重用户减少动画偏好：@media (prefers-reduced-motion: no-preference) 有条件启用
• 交互驱动：用状态切换与 transition 提供可控运动反馈

12. 总结与实践要点
• clip-path 控形，offset-path 控动，二者组合形成 CSS 空间表达的完整语汇
• 选对参照系与锚点，明确起点与旋转策略
• 动画以 offset-distance 为主，路径参数化，注意性能与可访问性

author Amit Sheen

Frontend Masters

The `-path` of Least Resistance (Part 2)

In the previous chapter, we explored clip-path and its power to reshape elements, cutting through the rectangular constraints of traditional elements to create circles, polygons, and complex curved shapes. We learned how to think beyond the box (literally)…

www.tgoop.com/cosine_front_end/2831

266 viewsAug 31 at 05:46

#优质博文 #前端 #CSS #动画 #course
这篇写得真好，offeset-path 讲明白了。
The -path of Least Resistance (Part 2)

AI 摘要：本文从静态形状的剪切路径 (clip-path) 转向运动路径 (offset-path)，系统讲解如何用 offset-distance、offset-anchor、offset-position、offset-rotate 等控制元素沿自定义路径自然运动；阐明 offset transform 在 transform 栈的执行顺序及其对视觉结果与性能的影响；区分闭合与开放路径、负值与溢出距离的行为；展示用 shape() 切分路径与 ray() 创建无限射线；并给出交互触发与可访问性 (prefers-reduced-motion) 的实践建议与性能优化策略。

1. 概念与对比
• 从剪切路径 (clip-path) 的“控形”转向偏移路径 (offset-path) 的“控动”
• 参照系差异：clip-path 相对元素 border-box，而 offset-path 相对包含块 (containing block)
• shape() 浏览器支持度低于 offset-path 与 clip-path

2. 值与坐标
• 支持绝对单位与百分比，适配响应式
• 大量使用 CSS 变量，使路径定义、函数参数、单点坐标可参数化
• 路径静态由 offset-path 定义，位置动态由 offset-distance 驱动

3. 距离与动画
• 核心动画仅需 offset-distance: 0% → 100%
• 非线性运动：通过多关键帧实现往返与停顿
• 可用 transition 在 hover、focus、click 等交互中平滑过渡 offset-distance

4. 锚点与起点
• offset-anchor 决定元素哪个点贴合路径（类似 transform-origin）
• offset-position 决定路径在包含块中的起始位置：normal(居中)、auto(元素自身位置)、或显式坐标

5. 旋转与方向
• offset-rotate 控制沿路径方向的旋转：auto、固定角度、auto 叠加角度、reverse
• 通过 auto 使元素切线对齐，实现自然转向

6. 变换栈与相互关系
• 变换顺序：单独 transform 属性 (translate/rotate/scale) → offset transform → transform
• 相同路径在不同层次的变换组合会产生不同视觉结果

7. 性能考虑
• offset-path 属于 transform 栈，享受硬件加速，避免重排重绘
• 动画中避免改动 offset-path，本应动画 offset-distance；用变量或类切换路径
• 简化路径：简单直线不必用 shape()，circle() 性能优于大量曲段的 path()

8. 闭合与开放路径
• circle()、inset()、polygon() 天生闭合，0% 与 100% 连续循环
• path()、shape() 可开可闭；开放路径 100% 回到 0% 会“跳跃”
• 负值与溢出：闭合路径可环绕归一化，开放路径则钳制在 0%–100%

9. 分段路径与“切割”
• 使用 shape() 的 move 指令在中途打断并重启路径
• 适合制作从一点“传送”到另一点的分段运动效果

10. 无限射线 ray()
• ray(angle) 生成无穷直线；100% 通过关键字定义参照距离：closest-side、closest-corner、farthest-side、farthest-corner、sides
• 始终为开放路径，超过 100% 将无限延伸，适用于飞出屏幕、激光、方向性动画

11. 可访问性与交互
• 尊重用户减少动画偏好：@media (prefers-reduced-motion: no-preference) 有条件启用
• 交互驱动：用状态切换与 transition 提供可控运动反馈

12. 总结与实践要点
• clip-path 控形，offset-path 控动，二者组合形成 CSS 空间表达的完整语汇
• 选对参照系与锚点，明确起点与旋转策略
• 动画以 offset-distance 为主，路径参数化，注意性能与可访问性

BY cosine - 前端人の日常频道