offset
Misol
<img> elementida offset-path, offset-distance va offset-rotate xususiyatlari qiymatlarini o‘rnatish uchun offset qisqartma xususiyatidan foydalaning:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
offset xususiyati elementni yo‘l bo‘ylab animatsiya qilishda ishlatiladi va quyidagi xususiyatlar uchun qisqartma xususiyatdir:
offset xususiyati qiymatini o‘rnatishning turli usullari uchun quyidagi "Ko‘proq misollar" bo‘limiga qarang.
| Standart qiymat: | Alohida xususiyatlarning standart qiymatlariga qarang |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| offset | 55 | 79 | 72 | 16 | 42 |
CSS sintaksisi
offset: auto|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| auto | Standart. Har bir alohida 'offset-' xususiyatining standart qiymatiga qarang. |
| offset-anchor | Elementning u bo‘ylab animatsiya qilinadigan yo‘lga mahkamlangan nuqtasini belgilaydi. Standart qiymati — auto |
| offset-distance | offset-path bilan belgilangan yo‘l boshidan masofani belgilaydi. Standart qiymati — 0 |
| offset-path | Element bo‘ylab animatsiya qilinadigan yo‘lni belgilaydi. Standart qiymati — none |
| offset-position | Elementning yo‘l bo‘ylab boshlang‘ich joylashuvini belgilaydi. Standart qiymati — normal |
| offset-rotate | Element yo‘l bo‘ylab animatsiya qilinayotganda uning aylanishini belgilaydi. Standart qiymati — auto |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
offset-path va offset-rotate
offset-path va offset-rotate xususiyatlari qiymatlarini o‘rnatish uchun <img> elementining offset xususiyatidan foydalaning:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
O‘zingiz sinab ko‘ring »
offset-path va offset-distance
offset-path va offset-distance xususiyatlari qiymatlarini o‘rnatish uchun <img> elementining offset xususiyatidan foydalaning:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
O‘zingiz sinab ko‘ring »
offset-path, offset-distance, offset-rotate va offset-anchor
offset-path, offset-distance, offset-rotate va offset-anchor xususiyatlari qiymatlarini o‘rnatish uchun <img> elementining offset xususiyatidan foydalaning:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
SVG darsligi: SVG path
CSS darsligi: CSS animatsiyalar
CSS ma’lumotnomasi: CSS offset-anchor xususiyati
CSS ma’lumotnomasi: CSS offset-distance xususiyati
CSS ma’lumotnomasi: CSS offset-path xususiyati
CSS ma’lumotnomasi: CSS offset-position xususiyati
CSS ma’lumotnomasi: CSS offset-rotate xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!