Сегодня мы рассмотрим как можно применить CSS анимацию в действии. В данном примере будем использовать несколько эффектов. Просто наводим мышь на изображением и видим эффект.
Теперь давайте посмотрим на код, на основе которого работает демо пример:
Основной HTML и CSS
Все эффекты применяются к html коду одного и того же вида. Вот как он выглядит:
<ul id="[EFFECT]" class="profiles">
<li>
<img class="pic" src="images/[PIC].jpg" />
<ul class="info">
<li><a href="[URL]">[NAME]</a></li>
<li>[MAIL]</li>
<li>[PHONE]</li>
</ul>
</li>
<!-- More cards -->
</ul>
Обратите внимание на маркер
, который используется в атрибуте ID. Таким образом мы можем применит несколько эффектов к одной и той же карточке. Это основной html, который нас может заинтересовать. Теперь давайте посмотрим на CSS. Я оставил только самое нужное:
[CSS].profiles {
list-style:none;
}
.profiles > li {
float:left;
}
.info, .pic {
position:absolute;
}
.info {
/* по умолчанию прячем подробную информацию о изображении */
opacity:0;
}
Вот и всё. Для просмотра полного CSS и HTML кода, смотрите исходники.
Эффект простого движения
#push .info {
transition: all 0.3s;
transition-delay:0.2s;
}
#push .pic {
transition: all 0.5s;
}
/* показываем информацию */
#push li:hover .info {
opacity:1;
}
/* уменьшаем видимость, поворачиваем и уменьшаем изображение */
#push li:hover .pic {
opacity:0.7;
transform: scale(0.7) rotate(10deg);
}
Эффект слайда
/* по умолчанию, панель информации смещаем влево */
#slide .info {
transition: all 0.3s;
transform: translate(-50px, 0);
}
#slide .pic {
transition: all 0.3s;
}
/* при наведении мыши, показываем блок информации и помещаем на нужную позицию */
#slide li:hover .info {
opacity:1;
transform: translate(0, 0);
}
/* при наведении мыши, показываем изображение и помещаем на нужную позицию */
#slide li:hover .pic {
opacity:0;
transform: translate(50px, 0);
}
Эффект 3D сальто
#flip {
perspective: 800px;
}
#flip .info {
transition: all 0.8s;
opacity:1;
transform-style: preserve-3d;
}
/* анимируем текст*/
#flip .info li {
transform: rotateY(180deg);
}
#flip .pic {
transition: all 0.8s;
backface-visibility: hidden;
z-index:999;
transform-style: preserve-3d;
}
/* при наводке мыши, поворачиваем */
#flip li:hover .info {
transform: rotateY(180deg);
}
/* при наводке мыши, поворачиваем */
#flip li:hover .pic {
transform: rotateY(180deg);
}
Эффект взрыва
#explode .info {
transition: all 0.7s;
transform: scale(0.8);
}
#explode .pic {
transition: all 0.7s;
}
/* при наводке мыши, показываем информацию */
#explode li:hover .info {
opacity:1;
transform: scale(1);
}
/* и обратно */
#explode li:hover .pic {
opacity:0;
transform: scale(1.4);
}
Итог
Вот и всё. Четыре созданных эффекта полностью в вашем распоряжении. Прелесть в том, что всё это только средствами CSS.