CSS ray() 函数

定义和用法

CSS ray() 函数定义了动画元素应遵循的偏移路径线段,该线段被称为“射线”。射线从偏移位置开始,并沿指定角度的方向延伸。

ray() 函数与 offset-path 属性共同使用。

实例

例子 1

射线的不同角度:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 65px;
  height: 65px;
  background: pink;
  offset-position: top right;
  offset-path: ray(-25deg);
}
#square3 {
  width: 65px;
  height: 65px;
  background: salmon;
  offset-position: bottom left;
  offset-path: ray(90deg);
}

亲自试一试

例子 2

使用 offset-pathray() 实现动画效果:

 #frameDiv {
  width: 200px;
  height: 200px;
  margin: 20px;
  position: relative;
  border: solid black 1px;
  background-color: rgb(205, 242, 205);
}
#frameDiv > div {
  width: 50px;
  height: 50px;
  background-color: hotpink;
  offset-path: ray(45deg);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

亲自试一试

CSS 语法

ray(angle size contain at position)
描述
angle 必需。指定射线的方向/角度。
size

可选。指定射线的长度,即相对于包含框的 offset-distance 0% 到 100% 之间的距离。

它接受以下关键字值之一:

  • closest-side - (默认)射线起点与包含块最近边之间的距离
  • closest-corner - 射线起点与包含块最近角之间的距离
  • farthest-side - 射线起点与包含块最远边之间的距离
  • farthest-corner - 射线起点与包含块最远角之间的距离
  • sides - 射线起点与线段与包含块边界相交点之间的距离
contain 可选。缩短射线的长度,以确保即使在 offset-distance: 100% 时,元素也保持在包含块内。
at position

可选。指定射线的起点以及元素在包含块中的放置位置。

如果省略,则使用元素的 offset-position 值。

如果元素没有 offset-position 值,则元素放置在包含块的中心(即 50% 50%)。

Vituo vya teknolojia

Toleo: CSS Motion Path Module Level 1

Muungano wa kifaa kilicho kufungua

Jinadili la jina la kifaa kilicho kinadhihirwa kwa sababu ya msingi wa kufungua kufikia tabia hii.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Mawasiliano ya hali

Marejeo:Mfano wa offset-path