Fungsi ray() CSS

Definisi dan penggunaan

CSS ray() Fungsi menentukan jalur patah jalur offset yang harus diikuti elemen animasi, yang disebut 'ray'. Ray mulai dari posisi offset dan berpanjangan ke arah sudut yang ditentukan.

ray() Fungsi dengan offset-path Atribut digunakan bersamaan.

Contoh

Contoh 1

Ray dari sudut berbeda:

#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);
}

Coba Sendiri

Contoh 2

dengan offset-path dan ray() Menciptakan efek animasi：

 #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%; }
}

Coba Sendiri

Sintaks CSS

ray(angle size contain at position)
Nilai Deskripsi
angle Wajib. Tentukan arah/dasar sinar.
size

Pilihan. Tentukan panjang sinar, yaitu jarak dari offset-distance 0% sampai 100% terhadap kotak yang mengandung.

Ia menerima salah satu nilai kata kunci berikut ini：

  • closest-side - (default) Jarak titik awal sinar dengan sisi terdekat kotak yang mengandung
  • closest-corner - Jarak titik awal sinar dengan sudut terdekat kotak yang mengandung
  • farthest-side - Jarak titik awal sinar dengan sisi terjauh kotak yang mengandung
  • farthest-corner - Jarak titik awal sinar dengan sudut terjauh kotak yang mengandung
  • sides - Jarak titik awal sinar dengan titik pertemuan garis dengan batas kotak yang mengandung
contain Pilihan. Pajangan panjang sinar, untuk memastikan bahwa elemen tetap berada di dalam kotak yang mengandung, bahkan saat offset-distance: 100%.
at position

Pilihan. Tentukan titik awal sinar serta posisi elemen di dalam kotak yang mengandung.

Jika disingkirkan, maka digunakan nilai offset-position elemen.

Jika elemen tidak memiliki nilai offset-position, elemen ditempatkan di tengah kotak yang mengandung (yaitu 50% 50%).

Detil Teknologi

Versi： Modul Lapisan 1 CSS Motion Path

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

Halaman yang berhubungan

Referensi:Atribut offset-path