Yozuv uchun animatsiya

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2014-05-01

Yozuv uchun animatsiya

To’plam xar hil turdagi CSS3 xarakat, almashtirish mumkun tugmacha bilan, boshqaa obektga
hover.css css kodni yaratamiz
Agar siz rejalashtirish foydalanish faqat samarali eng yaxshi ko’chirish o’ziga unga ko’rinish agar foydalanish hamasi fayil hover.css da.

Misol uchun biz Grow dan foydalanamiz:

Ko’ramiz hover.css
Fayilda hover.css, o’tamiz ko’inish uchun 'Grow' (shu yordamida):

/* Grow */
/*Yozuv harakati*/
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

O’zimizga foyda qilib tushiramiz.
HTMLkod kerakli element qaraymiz .grow dan.

Shu animatsiyani ishlatamiz kerakli gipermurojatga yuboramiz :

<a class="button">Add to Basket</a>
Qo’shamiz kerakli sinifni:
<a class="button grow">Add to Basket</a>

hover-min.css hamma hujjatlarda ishlatamiz

Xamasini ishlatishni xoxlasak hover.css ni qo’shing.

Ko’chirib oling hover-min.css
Ish katoligiga hover-min.css qo’shing css dan qo’shish.
hover-min.css ni qo’shing <head>:ga

<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>
saylab efektni uni kerakli obektga ishlating.
Shu knopkaga :
<a class="button">Add to Basket</a>
Kerakli bo’limni qo’shing:
<a class="button grow">Add to Basket</a>
tamom!
ruseller.com saytidan olingan
https://github.com/IanLunn/Hover

2803 marta o`qildi.

shoydullo adminstrator