Reja:
CSS animatsiyalar
4
CSS3 asoslari
1
CSS matn effektlari
2
CSS da ikki o’lchovli va uch o’lchovli transformatsiya
3
CSS preprotsessorlari (sass, less).
5
CSS3-ni veb-saytga kiritish odatda uchta strategiya yordamida amalga oshirilishi mumkin: - 1-strategiya: Qo'lingizdan kelganicha foydalaning
- 2-strategiya: CSS3 xususiyatlarini yaxshilash sifatida ko'ring
- 3-strategiya: Modernizr kutubxonasi bilan zaxira yechimlarni qo'shing
Quyida oddiy fonni gradient bilan almashtirish uchun ushbu usuldan foydalanish misoli keltirilgan: Quyida oddiy fonni gradient bilan almashtirish uchun ushbu usuldan foydalanish misoli keltirilgan:
header {
background:yellow;
background: radial-gradient(ellipse, red, yellow);
}
Yuqorida: CSS3 ni tushunmaydigan brauzerlar sarlavha qoidasining birinchi qismidan foydalanadi va fonni sariq rangga bo'yaydi. Pastki: CSS3-ni tushunadigan brauzerlar qoidaning ikkinchi qismini ishlatadi va fonni radial gradient bilan to'ldiradi
Sahifani belgilashda Modernizr skriptiga havola qo'shish orqali siz uslublar jadvali qoidalarining quyidagi kombinatsiyasidan foydalanishingiz mumkin: Jadvaldagi raqamlar xususiyatni to'liq qo'llab-quvvatlaydigan birinchi brauzer versiyasini ko'rsatadi @keyframes qoidasi - Qoida ichida CSS uslublarini belgilaganingizda @keyframes , animatsiya ma'lum vaqtlarda asta-sekin joriy uslubdan yangi uslubga o'zgaradi.
- Animatsiyani ishga tushirish uchun siz animatsiyani elementga bog'lashingiz kerak.
- Quyidagi misol “example" animatsiyasini
elementiga bog'laydi. Animatsiya 4 soniya davom etadi va u elementining fon rangini asta-sekin "qizil"dan "sariq"ga o'zgartiradi: Quyidagi misol animatsiya 25%, 50% tugallanganda va 100% bajarilganda yana elementining fon rangini o'zgartiradi:
Do'stlaringiz bilan baham: |