Lynx

offset-distance

介绍

offset-distance CSS 属性指定元件在 offset-path 定义的路径上的位置。

可以将 offset-distanceoffset-path 配合使用,把元件放到路径上的指定进度位置,也可以通过动画让元件从路径起点运动到终点。

使用示例

语法

offset-distance: 0;
offset-distance: 1;
offset-distance: 0%;
offset-distance: 66%;
offset-distance: 100%;

取值

  • <number>

    使用归一化数值指定元件沿路径的进度。0 表示路径起点,1 表示路径终点。

  • <percentage>

    指定元件沿路径的进度。0% 表示路径起点,100% 表示路径终点。

  • 默认值

    0

Info

Lynx 目前支持 01 范围内的数值取值,以及 0%100% 范围内的百分比取值。

形式定义

初始值0
适用元素所有元件
是否支持继承no
是否支持动画yes
百分比参考路径总长度

形式语法

offset-distance = <number> | <percentage>

与 Web 的区别

  1. Lynx 不支持 <length>calc() 取值。

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。