Сегодня в интернете можно видеть множество различных CSS3-анимаций. Появляются такие анимации на чистом коде CSS3 как вспышки, затемнения, вращения, увеличение, перемещение или цепочка из нескольких сложных анимаций. Сегодня при помощи CSS-кода можно добиться такого эффекта, который может показаться невозможным на первый взгляд.
Это отличные новости для тех, кто не очень дружит с javascript. У вас также есть возможность создавать незначительны анимации при помощи таких свойств CSS3 как transition и transform. Эта технология поддерживается большинством современных браузеров, а также устаревшими браузерами вроде IE 8, и мы можем использовать условные браузерные префиксы и комментарии в некоторых случаях, когда поддержка того или иного свойства отсутствует.
Ранее мы уже рассказывали вам о CSS transform, а также представляли несколько руководств, связанных с CSS 3D transform. В качестве быстрого знакомства с CSS3 transition предлагаем вам следующий пример кода. Он довольно прост: ссылка с уровнем непрозрачности 50%, а при наведении курсора уровень поднимается до 100%. Здесь можно видеть 2 простых состояния уровня непрозрачности – 50% и 100%.
| Исходный код |    |
a { opacity: 0.5; }
a:hover { opacity: 1; }
Что если вам нужно увеличить или уменьшить уровень непрозрачности с 50 до 100% или наоборот? Мы можем сделать это посредством CSS3 transition. Мы воспользовались следующим переходом: all 300ms ease-out; (вам понадобятся префиксы для разных браузеров), и в результате получили эффект, когда при наведении курсора мыши уровень непрозрачности увеличивается с 50 до 100%. Довольно клево, не правда ли? Opacity – это всего лишь один из множества CSS-атрибутов, и попробуйте просто представить, что можно реализовать посредством остальных?
| Исходный код | |
a { opacity: 0.5; transition: all 300ms ease-out; }
a:hover { opacity: 1; }
Это CSS3-руководство покажет вам, как можно создать простой и элегантный эффект при наведении курсора по миниатюре изображения. Кроме того, при наведении также будет показываться дополнительная информация. Мы разработали 5 разных стилей – одна строка, двойная строка, сверху и снизу, увеличение и вращение. У всех этих эффектов довольно схожая HTML-разметка, а также базовый код CSS. Основные отличия заключаются в оформлении раздела с информацией.
Мы не будем сегодня рассказывать подробно обо всех эффектах, и затронем только лишь эффект с двойной строкой и увеличением.
HTML-код
Вот так будет выглядеть основная структура HTML-кода. Весь текстовый контент будет обернут классом .item-hover. Для запуска всех эффектов мы будем использовать псевдо-код для :hover — .item-hover.
| Исходный код | |
Caption Put Here February 29, 2014
Вот так будут выглядеть слои просмотров в HTML-разметке.
CSS-код
Здесь вам следует обратить внимание на то, что все эффекты разделяют между собой одну и ту же базу CSS-кода. Основное различие заключается в .item-info. Мы изменим внешний вид этого класса, и добавим незначительную анимацию. Также предлагаем вам код для эффекта с увеличением.
Нам нужно будет воспользоваться всеми необходимыми браузерными префиксами для корректной работы transition, transform и opacity.
| Исходный код | |
.item { text-align:center; float:left; margin:5px; position:relative; }
.item, .item-hover, .item-hover .mask, .item-img, .item-info { width: 300px; height: 225px; }
.item-hover, .item-hover .mask, .item-img { position:absolute; top:0; left:0; } .item-type-zoom .item-hover { z-index:5; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity:0; cursor:pointer; display:block; text-decoration:none; text-align:center; }
.item-type-zoom .item-info { z-index:10; color:#ffffff; display:table-cell; vertical-align:middle; position:relative; z-index:5; -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); transform: scale(0,0); -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; }
.item-type-zoom .item-info .headline { font-size:18px; width:75%; margin:0 auto; border:4px solid #ffffff; padding:10px; }
.item-type-zoom .item-info .line { height:1px; width:60%; margin:15px auto 10px auto; background-color:#ffffff; }
.item-type-zoom .item-info .date { font-size:14px; font-style:italic; }
.item-type-zoom .item-hover .mask { background-color:#000; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); z-index:0; }
.item-type-zoom .item-hover:hover { opacity:1; } .item-type-zoom .item-hover:hover .item-info { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); } .item-img { background-color:#7a548f; z-index:0; }
Заголовок: hover-effects (0 click)
Подпись:
Filename: hover-effects.zip
Размер: 185 kB