linkedin facebook linkedin facebook nod32

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

1838 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений