CSS offset-path 属性之几何图形路径
CSS offset-path 属性值除了可以使用 ray 函数和来源于 SVG 的 path 函数定制属性值，还可以使用 SVG 基本图形充当函数赋值。基本图形函数制作的路径更易理解、代码更简洁。
| 序号 | 函数 | 语法 | 备注 |
|---|---|---|---|
| 1 | circle（圆） | circle(r at x y) | r ：半径，x、y |
| 2 | ellipse（椭圆） | ellipse(rx ry at x y) | rx、ry ：x和y轴半径，x、y ：圆心位置 |
| 3 | inset（内矩形） | inset(top right bottom left [round number]) | 支持单值、多值表达，支持圆角 |
| 4 | polygon（多边形） | polygon(x1 y1, x2 y2, ..., xn yn) | 坐标数据支持数值、百分比 |
| 5 | xywh（矩形路径） | xywh(x y width height [round number]) | x、y ：矩形左上角坐标，width、height ：矩形宽高，支持圆角 |
⬇️ 选择动画路径：
前一篇: textarea模拟高亮关键字
下一篇: 纯CSS实现多图无限平滑循环滚动
发表评论:
评论列表 [0条]
