2-Amaliy ish Mavzu: Transitions xususiyatini o‘rganish Ishdan maqsad: Css da transitions xususiyati effektlarini qo'llashni o'rganish va amaliyotda sinab ko'rish. Nazariy qism css transitions



Download 260,39 Kb.
Sana24.11.2022
Hajmi260,39 Kb.
#871913
Bog'liq
dxx web

7


2-Amaliy ish

Mavzu: Transitions xususiyatini o‘rganish
Ishdan maqsad: Css da transitions xususiyati effektlarini qo'llashni o'rganish va amaliyotda sinab ko'rish.
Nazariy qism
CSS transitions(CSS o'tishlari)
CSS transitions bizga ma'lum vaqt davomida mulk qiymatlarini muammosiz o'zgartirish imkonini beradi.Transition xususiyati ob'ektning o'zgaruvchan CSS xususiyati, animatsiyaning o'tish muddati, vaqtni belgilash funksiyasi, animatsiyani kechiktirish kabi animatsiya parametrlari uchun javobgardir. Transitionsning o'zini bir nechta xususiyatlari bor. Bu xususiyatlar haqida bilib olamiz:
~ transitions- To'rtta transitions xususiyatini bitta xususiyatga o'rnatish uchun stenografiya xususiyati
~ transition-delay-Transitions effekti uchun kechikishni (soniyalarda) belgilaydi
~ transition-duration-Transitions effekti qancha vaqtda(millisekundda) bajarilishini belgilaydi
~ transition-property-Transitions effekti uchun CSS xususiyati nomini belgilaydi
~ transition-timing-function-Transitions effektining tezlik egri chizig'ini belgilaydi
Transitions xususiyatlarini to'liq qo'llab-quvvatlaydigan brauzer versiyalarini ko'rsatib o'taman.



CSS transitionsdan qanday foydalanish kerak?
Transitions effektini yaratish uchun siz ikkita narsani belgilashingiz kerak:
Effekt qo'shmoqchi bo'lgan CSS xususiyatini va effekt ta'sir muddati.
Eslatma: Agar Effekt tasir muddati qismi ko'rsatilmagan bo'lsa, transitionning hech qanday ta'siri bo'lmaydi, chunki standart qiymat 0 dir.
Quyidagi misolda 100px * 100px qizil
elementi koʻrsatilgan.
elementi kenglik xususiyati uchun 2 soniya davomiylik bilan o'tish effektini ham belgilab qo'ydim (agar 2 soniya qo'yilmaganda transitions effekti ishlamasdi):
Bunda belgilangan CSS xususiyati (kengligi) qiymatni o'zgartirganda, transitions effekti boshlanadi.
Transition-timing-function xususiyati transitions effektining tezlik egri chizig'ini belgilaydi.
Transition-time-funktsiya xususiyati quyidagi qiymatlarga ega bo'lishi mumkin:
~ease- o'tish effektini sekin boshlash, keyin tez, keyin sekin tugashini belgilaydi (bu standart)
~linear- boshidan oxirigacha bir xil tezlikda o'tish effektini belgilaydi.
~ease-in- sekin boshlash bilan o'tish effektini belgilaydi.
~ease-out- sekin tugaydigan o'tish effektini belgilaydi.
~ease-in-out- sekin boshlanishi va tugashi bilan o'tish effektini belgilaydi.
~cubic-bezier(n,n,n,n)- kub-bezier funktsiyasida o'z qiymatlaringizni aniqlash imkonini beradi.
Quyidagi misolda foydalanish mumkin bo'lgan turli tezlik egri chiziqlari ko'rsatilgan:

Transition-delay xususiyati transitions effekti uchun kechikishni (soniyalarda) belgilaydi. Quyidagi misolda boshlashdan oldin 1 soniya kechikish mavjud:


Biz yuqorida ko'rgan Transition xususiyalarti oddiy va tushunarli. Men endi faqat uning parametrlaridan biriga - vaqt funktsiyasiga to'xtalmoqchiman. Bu funktsiya 4 ta qiymat (x1, y1, x2, y2) - yo'nalish nuqtalari koordinatalarini oladigan Beze egri chiziqlari yordamida o'rnatiladi.Bu funktsiyaning bir nechta maxsus holatlari o'z nomlariga ega, masalan chiziqli. Agar sizga maxsus effekt kerak bo'lsa, siz ushbu generatordan foydalanishingiz mumkin. Men hozirgi misolimda sizga nostandart vaqtinchalik funktsiyadan foydalanish variantini ko'rsataman:


Transitions xususiyatlaridan foydalangan holda HTML va CSS da o'zim tuzgan kod:


Transitions 1.







transitions xususiyati


transitions effektini koʻrish uchun sichqonchani quyidagi div elementi ustiga olib boring:





Download 260,39 Kb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish