Fungsi ray() CSS

Definisi dan penggunaan

CSS 射线（ Fungsi menentukan jalur garis pembedaan yang harus diikuti elemen animasi, yang disebut 'ray'. Ray mulai dari posisi offset dan melanjutkan ke arah sudut yang ditentukan.

射线（ Fungsi dengan 偏移路径 Properti digunakan bersama-sama.

Contoh

Contoh 1

Ray dari sudut yang berbeda:

#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;
}
@关键帧 moveDiv {
  100% { 偏移距离: 100%; }
}

亲自试一试

CSS 语法

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

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

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

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

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

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

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

技术细节

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

浏览器支持

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

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Laman berkenaan

Rujukan:Sifat offset-path