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

demosourse

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.marcofolio.net/css/css_animated_profile_cards.html
Перевел: Станислав Протасевич
Урок создан: 25 Апреля 2013
Просмотров: 24918
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 25 Апреля 2013 15:31
    lumore
    не работают исходники, проверьте
    • 25 Апреля 2013 17:01
      Inik1I
      У меня тоже(
      • 25 Апреля 2013 17:12
        stas.protasevich
        если вы запускаете в Google Chrome, то для работы нужно поместить проект на локальный сервер. Запускать оттуда: localhost/demo
        • 26 Апреля 2013 15:48
          Inik1I
          Большое спасибо! Теперь работает =)
  • 26 Апреля 2013 10:40
    Angel0s
    Спасибо, хорошая статья.
  • 27 Апреля 2013 12:41
    micha
    В закладки. Где-нибудь пригодится.
  • 24 Мая 2013 03:01
    addme7
    в демо все работает, но как только скачиваю исходники по-человечески работает только в мазиле, во всех остальных либо без анимации, либо вообще нет реакции. Странно, вроде исходники совпадают с исходным кодом (запуская на дэнвере)
  • 24 Мая 2013 03:10
    addme7
    а все, понял. просто руки не из того места растут)
^ Наверх ^