CSS ray() fonksiyonu

Tanım ve Kullanım

CSS ray() Fonksiyon, animasyon elemanlarının izlemesi gereken ofset yol çizgilerini tanımlar, bu çizgi 'ışın' olarak adlandırılır. Işın, ofset konumundan başlayarak belirtilen açı yönlü olarak uzanır.

ray() Fonksiyon ile offset-path Özellikler birlikte kullanılır.

Örnek

Örnek 1

Farklı açılardaki ışınlar:

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

Kişisel olarak deneyin

Örnek 2

kullanarak offset-path ve ray() Animasyon etkisini gerçekleştirin:

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

Kişisel olarak deneyin

CSS Dilbilgisi

ray(Angle Size Contain At Position)
Değer Açıklama
Angle Gerekli. Nükleerin yönünü/ açısını belirtir.
Size

Opsiyonel. Nükleerin uzunluğunu belirtir, yani iç içe geçen çerçeveye göre offset-distance 0% ile 100% arasındaki mesafe.

Aşağıdaki anahtar değerlerden biri alınır:

  • Closest-side - (varsayılan) Nükleer başlangıç noktası ile iç içe geçen blok en yakın kenarı arasındaki mesafe
  • Closest-corner - Nükleer başlangıç noktası ile iç içe geçen blok en yakın köşesi arasındaki mesafe
  • Farthest-side - Nükleer başlangıç noktası ile iç içe geçen blok en uzak kenarı arasındaki mesafe
  • Farthest-corner - Nükleer başlangıç noktası ile iç içe geçen blok en uzak köşesi arasındaki mesafe
  • Sides - Nükleer başlangıç noktası ile çizginin iç içe geçen blok sınırlarıyla çakışma noktası arasındaki mesafe
Contain Opsiyonel. Nükleerin uzunluğunu kısaltır, böylece offset-distance: 100% olduğunda bile element iç içe geçen blok içinde kalır.
At Position

Opsiyonel. Nükleer başlangıç noktasını ve elementin iç içe geçen blok içindeki yerleştirme konumunu belirtir.

Atlanırsa, elementin offset-position değeri kullanılır.

Eğer element offset-position değeri yoksa, element iç içe geçen bloğun merkezine yerleştirilir (yani 50% 50%).

Teknik Ayrıntılar

Sürüm: CSS Hareket Yolu Modülü 1

Tarayıcı Desteği

Tablo içindeki rakamlar, bu işlevi tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
116 116 122 17 102

İlgili sayfalar

Referans:offset-path özelliği