Biz sahifaga css-ni qo'lladik. Bundan tashqari, bizning saytimizga uslublar yig'ish shart emas inline uslublari

Box modeliga kirish
CSS qutisi modeli Internetdagi tartibning asosi bo'lib, har bir element to'rtburchaklar quti shaklida taqdim etiladi. Quti modeli, aslida, har bir HTML elementi tarkibining chegarasi, chegarasi, to'ldirilishi va haqiqiy tarkibni o'rab turgan qutidir.

Box xususiyati: - To'rtburchaklar quti ichidagi har bir element tegishli xususiyatlarga ega: to'ldirish, chekka, chegara, balandlik, kenglik bular quti modelining asosiy elementidir.



CSS3 effektlari, transformasiya,animasiyalar bilan ishlash.
$ npm install animate.css --save

Yoki Yarn bilan o'rnating (bu faqat Webpack, Parcel va boshqalar kabi mos asboblar bilan ishlaydi. Agar kodingizni qadoqlash yoki to'plash uchun hech qanday vositadan foydalanmasangiz, quyidagi CDN usulidan foydalanishingiz mumkin):

$ yarn add animate.css

Uni faylingizga import qiling:

import 'animate.css';

Yoki CDN yordamida uni bevosita veb-sahifangizga qo'shing:

rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>



CSS maxsus xususiyatlari (CSS o'zgaruvchilari)
4-versiyadan boshlab, Animate.css animatsiyaning davomiyligi, kechikishi va takrorlanishini aniqlash uchun maxsus xususiyatlardan (CSS o‘zgaruvchilari sifatida ham tanilgan) foydalanadi. Bu Animate.css-ni juda moslashuvchan va moslashtiradigan qiladi. Animatsiya davomiyligini o'zgartirish kerakmi? Faqat global yoki mahalliy miqyosda yangi qiymat o'rnating.

Misol:
/* This only changes this particular animation duration */

.animate__animated.animate__bounce {
--animate-duration: 2s;
}

/* This changes all the animations globally */

:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}

Maxsus xususiyatlar, shuningdek, animatsiyangizning vaqt cheklangan xususiyatlarini tezda o'zgartirishni osonlashtiradi. Bu shuni anglatadiki, siz JavaScript-ni bir qatorli sekin harakat yoki vaqt oralig'i effektiga ega bo'lishingiz mumkin:

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish

document.documentElement.style.setProperty('--animate-duration', '.5s');

Ba'zi eskirgan brauzerlar maxsus xususiyatlarni qo'llab-quvvatlamasa ham, Animate.css CSS animatsiyalarini qo'llab-quvvatlaydigan har qanday brauzerni qo'llab-quvvatlashini kengaytirib, tegishli zaxirani ta'minlaydi.