css3 effektlari, transformatsiya, animatsiyalar bilan ishlash

DOCX 15 pages 359.9 KB Free download

15 pages

FaylHub.uz

Download via Telegram

Size 359.9 KB

File type DOCX

Pages 15

Updated Dec 2025

Page preview (5 pages)

Scroll down 👇

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

Want to read more?

Download all 15 pages for free via Telegram.

Download full file

About "css3 effektlari, transformatsiya, animatsiyalar bilan ishlash"

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...

This file contains 15 pages in DOCX format (359.9 KB). To download "css3 effektlari, transformatsiya, animatsiyalar bilan ishlash", click the Telegram button on the left.

Tags: css3 effektlari, transformatsiy… DOCX 15 pages Free download Telegram