ray()
CSS ray() funksiyasi animatsiyalanuvchi element harakatlanishi kerak bo‘lgan offset-path kesmasini belgilaydi. Bu kesma "ray" (nur) deb ataladi. Nur offset-position nuqtasidan boshlanadi va ko‘rsatilgan burchak yo‘nalishida davom etadi.
ray() funksiyasi offset-path xususiyati bilan ishlatiladi.
Misol
Turli burchakli nurlar:
#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);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| ray() | 116 | 116 | 122 | 17 | 102 |
CSS sintaksisi
ray(angle size contain at position)
| Qiymat | Tavsif |
|---|---|
| angle | Majburiy. Nurning yo‘nalishini/burchagini belgilaydi |
| size | Ixtiyoriy. Nurning uzunligini, ya’ni o‘z ichiga olgan qutiga nisbatan offset-distance 0% va 100% orasidagi masofani belgilaydi. U quyidagi kalit so‘z qiymatlaridan birini qabul qiladi:
|
| contain | Ixtiyoriy. Element offset-distance: 100% bo‘lganda ham o‘z ichiga olgan blok ichida qolishini ta’minlash uchun nur uzunligini qisqartiradi |
| at position | Ixtiyoriy. Nurning boshlang‘ich nuqtasini va elementning o‘z ichiga olgan blokda qayerga joylashishini belgilaydi. Agar ko‘rsatilmasa, elementning offset-position qiymati ishlatiladi. Agar elementda offset-position qiymati bo‘lmasa, element o‘z ichiga olgan blokning markaziga (yoki 50% 50%) joylashtiriladi |
| Versiya: | CSS Motion Path moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
offset-path va ray() animatsiyasi:
#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%; }
}
O‘zingiz sinab ko‘ring »
CSS ma’lumotnomasi: offset-path xususiyati.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!