دالة ray() في CSS

تعريف وطرق الاستخدام

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(زاوية الحجم تحتوي في وضع)

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يعكس إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل أولاً.

الصفحات ذات الصلة

المرجع:خصائص offset-path