CSS ray() 函数

定义和用法

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

射线() 函数与 偏移路径 属性一起使用。

shafin

masanin 1

rayo na harshe:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  偏移路径: 射线(45度);
}
#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;
  偏移路径: 射线(90度);
}

亲自试一试

例子 2

使用 偏移路径 和 射线() 实现动画效果：

 #frameDiv {
  宽度: 200像素;
  高度: 200像素;
  边距: 20像素;
  位置: 相对;
  边框: 实心黑色 1像素;
  背景颜色: rgb(205, 242, 205);
}
#frameDiv > div {
  宽度: 50像素;
  高度: 50像素;
  背景颜色: 热粉色;
  偏移路径: 射线(45度);
  动画: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { 偏移距离: 100%; }
}

亲自试一试

CSS 语法

射线(角度 大小 包含 在 位置)
值 描述
角度 必需。指定射线的方向/角度。
大小

可选。指定射线的长度，即相对于包含框的偏移距离 0% 到 100% 之间的距离。

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

  • 最近边 - （默认）射线起点与包含块最近边之间的距离
  • 最近角 - 射线起点与包含块最近角之间的距离
  • 最远边 - 射线起点与包含块最远边之间的距离
  • 最远角 - 射线起点与包含块最远角之间的距离
  • 边 - 射线起点与线段与包含块边界相交点之间的距离
包含 可选。缩短射线的长度，以确保即使在偏移距离: 100% 时，元素也保持在包含块内。
在 位置

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

如果省略，则使用元素的偏移位置值。

如果元素没有偏移位置值，则元素放置在包含块的中心（即 50% 50%）。

技术细节

版本： CSS 动画路径模块级别 1

浏览器支持

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

Chrome Edge Firefox Safari Opera
116 116 122 17 102

shafuka da yake da alhakin

kira:kali offset-path