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モーションピースモジュールレベル1

ブラウザのサポート

テーブルの数字は、その機能を最初に完全にサポートしたブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
116 116 122 17 102

相关页面

参考：offset-path 属性