{% else-1 %}

                        
Сегодня мы рассмотрим как можно применить CSS анимацию в действии. В данном примере будем использовать несколько эффектов. Просто наводим мышь на изображением и видим эффект.

Теперь давайте посмотрим на код, на основе которого работает демо пример:

Основной HTML и CSS

Все эффекты применяются к html коду одного и того же вида. Вот как он выглядит:











01

<ul id="[EFFECT]" class="profiles">





02

<li>





03

<img class="pic" src="images/[PIC].jpg" />





04

<ul class="info">





05

<li><a href="[URL]">[NAME]</a></li>





06

<li>[MAIL]</li>





07

<li>[PHONE]</li>





08

</ul>





09

</li>





10

<!-- More cards -->





11

</ul>


Обратите внимание на маркер [EFFECT], который используется в атрибуте ID. Таким образом мы можем применит несколько эффектов к одной и той же карточке. Это основной html, который нас может заинтересовать. Теперь давайте посмотрим на CSS. Я оставил только самое нужное:











01

.profiles {





02

list-style:none;





03

}





04

.profiles > li {





05

float:left;





06

}





07

.info, .pic {





08

position:absolute;





09

}





10

.info {





11

/* по умолчанию прячем подробную информацию о изображении */





12

opacity:0;





13

}


Вот и всё. Для просмотра полного CSS и HTML кода, смотрите исходники.

Эффект простого движения











01

#push .info {





02

transition: all 0.3s;





03

transition-delay:0.2s;





04

}





05

#push .pic {





06

transition: all 0.5s;





07

}





08

/* показываем информацию */





09

#push li:hover .info {





10

opacity:1;





11

}





12

/* уменьшаем видимость, поворачиваем и уменьшаем изображение */





13

#push li:hover .pic {





14

opacity:0.7;





15

transform: scale(0.7) rotate(10deg);





16

}


Эффект слайда











01

/* по умолчанию, панель информации смещаем влево */





02

#slide .info {





03

transition: all 0.3s;





04

transform: translate(-50px, 0);





05

}





06

#slide .pic {





07

transition: all 0.3s;





08

}





09

/* при наведении мыши, показываем блок информации и помещаем на нужную позицию */





10

#slide li:hover .info {





11

opacity:1;





12

transform: translate(0, 0);





13

}





14

/* при наведении мыши, показываем изображение и помещаем на нужную позицию */





15

#slide li:hover .pic {





16

opacity:0;





17

transform: translate(50px, 0);





18

}


Эффект 3D сальто











01

#flip {





02

perspective: 800px;





03

}





04







05

#flip .info {





06

transition: all 0.8s;





07

opacity:1;





08

transform-style: preserve-3d;





09

}





10

/* анимируем текст*/





11

#flip .info li {





12

transform: rotateY(180deg);





13

}





14

#flip .pic {





15

transition: all 0.8s;





16

backface-visibility: hidden;





17

z-index:999;





18

transform-style: preserve-3d;





19

}





20

/* при наводке мыши, поворачиваем */





21

#flip li:hover .info {





22

transform: rotateY(180deg);





23

}





24

/* при наводке мыши, поворачиваем */





25

#flip li:hover .pic {





26

transform: rotateY(180deg);





27

}


Эффект взрыва











01

#explode .info {





02

transition: all 0.7s;





03

transform: scale(0.8);





04

}





05

#explode .pic {





06

transition: all 0.7s;





07

}





08

/* при наводке мыши, показываем информацию */





09

#explode li:hover .info {





10

opacity:1;





11

transform: scale(1);





12

}





13

/* и обратно */





14

#explode li:hover .pic {





15

opacity:0;





16

transform: scale(1.4);





17

}


Итог

Вот и всё. Четыре созданных эффекта полностью в вашем распоряжении. Прелесть в том, что всё это только средствами CSS.
-2 57 0
0

Нет фото
fiska * 0.36
• 6 июн 2013, 23:35


В коде имеет значение как он скопирован и не важен сам код? Код прошел модернизацию - значит администрация сайта притензий к коду не имеет!!!

0

Нет фото
• 5 июн 2013, 22:31


раз копируеш, копируй нормально а не через одно место
[сообщение прошло проверку админом]

0

Нет фото
fiska * 0.36
• 5 июн 2013, 10:37


За что минуса?
Миню красиво будет на вэб темах с помощью этого кода