offset-path
Misol
Animatsiyali <div> harakatlanadigan yo‘lni yarating:
div {
offset-path: path('M20,170 L100,20 L180,100 Z');
animation: moveDiv 3s 3;
}
@keyframes moveDiv {
100% { offset-distance: 100%; }
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
offset-path xususiyati animatsiyali element harakatlanadigan yo‘lni yaratadi.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | Ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| offset-path | 55 | 79 | 72 | 15.4 | 45 |
CSS sintaksisi
offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Standart. Elementning standart offset-path xususiyati qiymati |
| path() | Yo‘lni SVG sintaksisida belgilaydi. SVG yo‘llari (path) haqida o‘rganing |
| ray() | Yo‘lni CSS ray() funksiyasi bilan belgilaydi |
| url() | Yo‘lni SVG faylga URL orqali belgilaydi |
| <basic-shape> | Yo‘lni inset(), circle(), ellipse() yoki polygon() kabi CSS funksiyalari yordamida asosiy shaklni aniqlash orqali belgilaydi |
| <coord-box> | |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
SVG darsligi: SVG path
CSS darsligi: CSS animatsiyalar
CSS ma’lumotnomasi: CSS offset xususiyati
CSS ma’lumotnomasi: CSS offset-anchor xususiyati
CSS ma’lumotnomasi: CSS offset-distance xususiyati
CSS ma’lumotnomasi: CSS offset-position xususiyati
CSS ma’lumotnomasi: CSS offset-rotate xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!