CSS中offset相关属性

CSS中offset相关属性

offsetoffset属性可以用来实现元素的不规则运动。offset属性是多个css属性的缩写。其中有offset-anchor、offset-distance、offset-path、offset-position和offset-rotate。
offset-anchoroffset-anchor属性主要用来确定偏移运动的锚点，就是让元素沿着轨迹运动的点。语法简单offset-anchor:auto|<position>，auto是初始值，position就是具体的锚点位置。
offset-distanceoffset-distance属性表示偏移的距离大小，就是元素沿着路径移动的距离，属性值支持百分比值和长度值，也可以为负值，也可以大于100%。当移动的路径是一个封闭的路径，我们就可以利用offset-distance来实现一个不断循环、无限运动的动画效果。如果路径是封闭的的，无论offset-distance的值有多大，都可以看到位置的变化，如果路径不是封闭的而是开放的，则负值的位置和0%的位置是一样的，大于100%的值的位置和100%的位置是一样的。
offset-distance:10;offset-distance:66%;offset-distance:44px;offset-pathoffset-path属性用来指运动的路径，支持多种路径类型。语法比较多。
offset-path:none;offset-path:ray([<angle>&&<size>&&contain?]);offset-path:<path()>;offset-path:<url>;offset-path:[<basic-shape>||<geometry-box>];上面案例中的url可以直接使用页面内联svg元素中任意图形元素的路径。ray指的是表示射线状的偏移，其尺寸与当前元素的包含块元素密切相关。ray的偏移路径是一条射线，射线的起始位置默认是元素的中心，由offset-ancho属性决定。射线的角度是由angle决定，角度的方向和位置与css中的angle角度一样的，0deg表示方向朝上，正角度表示沿着顺时针方向旋转，射线的距离是由size参数决定。支持的比较多，其中有closest-side、closest-corner、farthest-side、farthest-corner和sides这些值，用来表示射线终止的位置是包含块元素的短边、长边、近角或远角。sides表示射线和包含块元素交点的距离，如果射线的初始位置不在包含块元素内，则sides表示的距离为0。参数contain表示当前元素是否在射线覆盖的圆形区域之内。
offset-positionoffset-position属性的作用是定义路径的起始点，语法offset-positio:auto|<position>，属性的特点是语法简单，细节繁多，支持较差。初始值是auto，用来表示偏移路径的起始点是元素正常的位置。position用来指定偏移路径起始点的位置。当路径的起始点发生变化，对应的offset偏移的时候也会发生位置的变化。
2024-09-18