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 屬性