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-path 和 ray() 实现动画效果：

 #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%）。

技术细节

版本： CSS Motion Path Module Level 1

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
116 116 122 17 102

相关页面

参考：offset-path 属性