CSS中offset相关属性(offsetwidth属性)
offset
offset
属性可以用来实现元素的不规则运动。offset属性是多个css属性的缩写。其中有offset-anchor
、offset-distance
、offset-path
、offset-position
和offset-rotate
。
offset-anchor
offset-anchor
属性主要用来确定偏移运动的锚点,就是让元素沿着轨迹运动的点。语法简单offset-anchor: auto | <position>
,auto是初始值,position就是具体的锚点位置。
offset-distance
offset-distance
属性表示偏移的距离大小,就是元素沿着路径移动的距离,属性值支持百分比值和长度值,也可以为负值,也可以大于100%。当移动的路径是一个封闭的路径,我们就可以利用offset-distance来实现一个不断循环、无限运动的动画效果。如果路径是封闭的的,无论offset-distance
的值有多大,都可以看到位置的变化,如果路径不是封闭的而是开放的,则负值的位置和0%的位置是一样的,大于100%的值的位置和100%的位置是一样的。
offset-distance: 10; offset-distance: 66%; offset-distance: 44px; 复制代码
offset-path
offset-path
属性用来指运动的路径,支持多种路径类型。语法比较多。
伪原创工具 SEO网站优化 https://www.237it.com/
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-position
offset-position
属性的作用是定义路径的起始点,语法offset-positio: auto | <position>
,属性的特点是语法简单,细节繁多,支持较差。初始值是auto
,用来表示偏移路径的起始点是元素正常的位置。position
用来指定偏移路径起始点的位置。当路径的起始点发生变化,对应的offset偏移的时候也会发生位置的变化。
作者:周帅帅
链接:https://juejin.cn/post/7035169518129250312