فنون 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