Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

Анимируем профильные карточки с помощью CSS

Twitter
Нравится
RedLine

Сегодня мы рассмотрим как можно применить 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>

Обратите внимание на маркер [EFFECT], который используется в атрибуте ID. Таким образом мы можем применит несколько эффектов к одной и той же карточке. Это основной html, который нас может заинтересовать. Теперь давайте посмотрим на 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.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/v0LT20HCfYw/lessons.php

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3