CSS ray() ফাংশন

বিবরণ ও ব্যবহার

CSS রেই( ফাংশনটি এনাইমেশন ইলেমেন্টটি অনুসরণ করতে হবার অবস্থান পথ শুষ্করণ নির্দিষ্ট করে, যা 'রেইজ' নামে পরিচিত। রেইজ অবস্থান থেকে শুরু করে, নির্দিষ্ট কোণের দিকে বিস্তৃত হয়。

রেই( ফাংশন সহ offset-path প্রতিভা একসঙ্গে ব্যবহার করা হয়。

একক

উদাহরণ 1

বিভিন্ন কোণের রেইজ:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  offset-path: ray(৪৫ডিগ্রি);
}
#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(৯০ডিগ্রি);
}

স্বয়ং প্রয়োগ করুন

উদাহরণ ২

ব্যবহার করুন offset-path এবং রেই( অ্যানিমেশন ইফেক্ট রূপায়িত করুন:

 #frameDiv {
  width: ২০০পিক্সেল;
  height: ২০০পিক্সেল;
  margin: ২০পিক্সেল;
  position: relative;
  border: solid black ১পিক্সেল;
  background-color: rgb(২০৫, ২৪২, ২০৫);
}
#frameDiv > div {
  width: ৫০পিক্সেল;
  height: ৫০পিক্সেল;
  background-color: hotpink;
  offset-path: ray(৪৫ডিগ্রি);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  ১০০% { offset-distance: ১০০%; }
}

স্বয়ং প্রয়োগ করুন

CSS সংজ্ঞা

রেই(এঞ্জল সাইজ কনটেইন অত্যাবশ্যক পোজিশন)

টেকনিক্যাল বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী ব্রাউজার সংস্করণ

সংশ্লিষ্ট পৃষ্ঠা

উল্লেখ:offset-path অপারেশন