css3 effektlari, transformatsiya, animatsiyalar bilan ishlash

DOCX 15 sahifa 359,9 KB Bepul yuklash

15 sahifa

FaylHub.uz

Telegram orqali yuklab olish

Hajm 359,9 KB

Fayl turi DOCX

Sahifalar 15

Yangilangan Dek 2025

Sahifa ko'rinishi (5 sahifa)

Pastga aylantiring 👇

1 / 15

axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti amaliy ish №6 mavzu: css3 effektlari, transformatsiya, animatsiyalar bilan ishlash. bajardi: 311/23-guruh talabasi narzullayev e. tekshirdi: rayimqulov o‘. toshkent – 2025 mavzu: css3 effektlari, transformatsiya, animatsiyalar bilan ishlash. nazariy qism: css3 effektlari css3 orqali sahifadagi elementlarga turli vizual effektlar berish mumkin. bu foydalanuvchiga yanada jozibador interfeys yaratishga yordam beradi. effektlar orasida eng mashhurlari — gradientlar, box-shadow (soya), text-shadow (matn soyasi), opacity (shaffoflik), transition (yumshoq o‘tishlar) kabi uslublardir. ular statik dizaynni jonlantiradi va elementlar o‘zaro aloqada bo‘lganida tabiiyroq ko‘rinishga ega bo‘ladi. transformatsiyalar transformatsiyalar css3 da elementlarni geometrik jihatdan o‘zgartirish imkonini beradi. transformatsiyalar orqali elementlarni aylantirish, siljitish, kattalashtirish yoki cho‘zish mumkin. asosiy transform funksiyalari: · translate(x, y) — elementni gorizontal va vertikal bo‘yicha siljitadi · rotate(deg) — elementni belgilangan gradusga buradi · scale(x, y) — elementni o‘lchamlarini kattalashtiradi yoki kichraytiradi · skew(x, y) — elementni qiyshaytiradi transformatsiyalar 2d (ikki …

2 / 15

animatsiya davomida qanday o‘zgarishini bosqichma-bosqich (foizlarda) belgilash mumkin. animation-name, animation-duration, animation-iteration-count, animation-delay, animation-direction kabi xossalar yordamida to‘liq boshqariladi. amaliy qism: div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } css animation note: when an animation is finished, it goes back to its original style. div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } css animation note: when an animation is finished, it goes back to its original style. div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } css animation note: when an animation is finished, it …

3 / 15

eyframes slide { to { transform: translatex(100px); } } .box2 { width: 100px; height: 100px; background: red; animation: slide 1s ease-in-out 2s; } 2. animation-duration animatsiyaning qancha davom etishini belgilaydi. @keyframes grow { to { transform: scale(2); } } .box3 { width: 100px; height: 100px; background: green; animation: grow 1s; } yashil kvadrat 1 soniya ichida ikki baravar kattalashadi. misol 2: @keyframes spin { to { transform: rotate(360deg); } } .box4 { width: 100px; height: 100px; background: blue; animation: spin 5s linear; } moviy kvadrat 5 soniyada to‘liq bir marta aylanadi. 3. animation-iteration-count animatsiyaning necha marta takrorlanishini belgilaydi. misol 1: @keyframes bounce { 50% { transform: translatey(-50px); } } .box5 { width: 100px; height: 100px; background: orange; animation: bounce 1s ease-in-out 3; } to‘q sariq kvadrat 3 marta tebranadi misol 2: @keyframes pulse { 50% { opacity: 0.5; } } .box6 { width: 100px; height: 100px; background: pink; animation: pulse …

4 / 15

sol 2: @keyframes move2 { to { transform: translatex(200px); } } .box10 { width: 100px; height: 100px; background: purple; animation: move2 2s linear; } binafsha kvadrat tekis, bir xil tezlikda harakat qiladi (linear). 6. animation-fill-mode animatsiya tugagandan (yoki boshlanishidan) keyin elementning holatini belgilaydi. misol 1: @keyframes growtext { to { font-size: 32px; } } .text1 { animation: growtext 2s forwards; } bu matn animatsiyadan keyin katta holatda qoladi forwards – animatsiya tugagach, oxirgi holatda qoladi. misol 2: @keyframes shrink { from { transform: scale(2); } to { transform: scale(1); } } .box11 { transform: scale(2); animation: shrink 2s backwards; animation-delay: 2s; } backwards – animatsiya kechikayotgan paytda ham boshlang‘ich holatni ko‘rsatadi. xulosa: ushbu amaliy ish davomida css3 animatsiyalari, transformatsiyalari va ularning asosiy xossalari — animation-delay, animation-duration, animation-iteration-count, animation-direction, animation-timing-function, va animation-fill-mode bilan tanishdim. image4.png image5.png image6.png image7.png image8.png image9.png image10.png image11.png image12.png image13.png image14.png image15.png image16.png image17.png image1.png image2.png image3.png

5 / 15

css3 effektlari, transformatsiya, animatsiyalar bilan ishlash - Page 5

Ko'proq o'qimoqchimisiz?

Barcha 15 sahifani Telegram orqali bepul yuklab oling.

To'liq faylni yuklab olish

"css3 effektlari, transformatsiya, animatsiyalar bilan ishlash" haqida

axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti amaliy ish №6 mavzu: css3 effektlari, transformatsiya, animatsiyalar bilan ishlash. bajardi: 311/23-guruh talabasi narzullayev e. tekshirdi: rayimqulov o‘. toshkent – 2025 mavzu: css3 effektlari, transformatsiya, animatsiyalar bilan ishlash. nazariy qism: css3 effektlari css3 orqali sahifadagi elementlarga turli vizual effektlar berish mumkin. bu foydalanuvchiga yanada jozibador interfeys yaratishga yordam beradi. effektlar orasida eng mashhurlari — gradientlar, box-shadow (soya), text-shadow (matn soyasi), opacity (shaffoflik), transition (yumshoq o‘tishlar) kabi uslublardir. ular statik dizaynni jonlantiradi va elementlar o‘zaro aloqada bo‘l...

Bu fayl DOCX formatida 15 sahifadan iborat (359,9 KB). "css3 effektlari, transformatsiya, animatsiyalar bilan ishlash"ni yuklab olish uchun chap tomondagi Telegram tugmasini bosing.

Teglar: css3 effektlari, transformatsiy… DOCX 15 sahifa Bepul yuklash Telegram