توابع 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