Сегодня рассмотрим несколько примеров красивой анимации блоков при помощи CSS3. Такие блоки хорошо смотрятся на всевозможных продающих страницах, в интернет магазинах и просто на сайте в качестве рекламных блоков.
Вначале блок выдает какую то информацию (картинку товара или просто текст), а при наведении курсора появляется другая информация, кликнув по которой переходишь по ссылке.
Пример 1
В начале напишем HTML-код.
<!-- Блоки, содержащие информацию анонса для вывода на экран -->
<div class="block_info">
<div class="info"></div>
<a href="#" class="inf_link" title="Переход по ссылке!"></a>
<h2>Заголовок 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </p>
<!-- Блоки, "рисующие" линии по периметру блока -->
<div class="L_top"></div>
<div class="L_right"></div>
<div class="L_bottom"></div>
<div class="L_left"></div>
</div>
Верхняя часть кода содержит ту информацию, которая должна появляться на экране. В данном примере блок с картинкой, ссылку и текст. В нижней части 4 блока, с помощью которых «рисуются» линии по периметру блока при наведении курсора.
Первоначально на экране видим картинку на сером фоне, но при наведении курсора картинка уменьшается и «убегает» в верхний угол блока, по периметру «рисуются» линии, и на белом фоне появляется текст-ссылка.
Для примера сделаем 2, почти идентичных блока, которые расположены ниже:
Заголовок 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin.
Заголовок 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin.
Задаем стили для самого блока, заголовка и текста:
.block_info {
width: 300px; /*ширина блока*/
height: 200px; /*высота блока*/
margin: 0 30px 30px 50px;
position: relative;
overflow: hidden;
background: #444; /*цвет фона блока*/
transition: background .2s ease-in-out .6s; /*изменение фона блока при анимации*/
}
.block_info p {
color: #333; /*цвет текста описания*/
opacity: 0;
text-align: justify;
padding: 0 20px 20px 20px;
-webkit-transition: opacity 0.2s ease-in-out .6s;
transition: opacity 0.2s ease-in-out .6s; /*Изменение текста при анимации*/
}
.block_info h2 {
text-align: center;
color: #77B3D4; /*цвет текста заголовка*/
font-size: 20px;
margin: 0;
padding: 0;
line-height: 25px;
opacity: 0;
padding: 20px 20px 10px 20px;
-webkit-transition: opacity 0.2s ease-in-out .6s;
transition: opacity 0.2s ease-in-out .6s; /*Изменение заголовка при анимации*/
}
Размеры блока, шрифта, их цвет, каждый выбирает на свой вкус.
Теперь ссылка и картинка:
.inf_link{
position: absolute;
top:0;
left:0;
display: block;
cursor: pointer;
width: 100%;
height: 100%;
}
/* Свойства блока с картинкой */
.info{
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
-webkit-transition: all 0.4s ease-in-out .3s;
transition: all 0.4s ease-in-out .3s;
z-index: 10;
}
/* Вывод картинки */
.info {
background: url(images/img1.jpg) no-repeat 50% 50%;
}
Ну а теперь наводим курсор:
/* Фон из серого становится белым, а заголовок и текст - видимым. */
.block_info:hover {
background: #eee;
}
.block_info:hover p, .block_info:hover h2{
opacity: 1;
}
/* Картинка "переезжает в верхний левый угол, при этом уменьшается */
.block_info:hover .inf {
top:-35%;
left:-40%;
-webkit-transform:scale(0.3);
transform:scale(0.3);
}
Настала очередь блоков, «рисующих» линии по периметру
.L_top, .L_right, .L_bottom, .L_left {
position: absolute;
background: #77B3D4; /*цвет границы*/
-webkit-transition:
top 0.4s ease-in-out 0s,
right 0.4s ease-in-out 0s,
bottom 0.4s ease-in-out 0s,
left 0.4s ease-in-out 0s;
transition:
top 0.4s ease-in-out 0s,
right 0.4s ease-in-out 0s,
bottom 0.4s ease-in-out 0s,
left 0.4s ease-in-out 0s;
}
.L_top, .L_bottom {width: 100%;height: 6px;}
.L_left, .L_right {width: 6px;height: 100%;}
/* граница сверху */
.L_top {left:-100%;top:0;}
.block_info:hover .L_top {left:0;}
/* граница справа */
.L_right {top:-100%;right:0;}
.block_info:hover .L_right {top:0;}
/* граница снизу */
.L_bottom {right:-100%;bottom:0;}
.block_info:hover .L_bottom {right:0;}
/* граница слева */
.L_left {bottom:-100%;left:0;}
.block_info:hover .L_left {bottom:0;}
}
Первоначально блоки «сдвинуты» каждый в свою сторону на -100% и поэтому их не видно. При наведении курсора начинается анимации и блоки занимают «нулевое» (left:0; top:0; right:0; bottom:0; ) положение. Это схемотически изображено ниже, где указано первоначальное положение блоков и направление последующего движения.
Пример 2
Чтобы увидеть следующую анимацию навидим курсор на блок.
AUDI
Audi ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.
Все начинается с HTML. Код для одного из блоков:
<div class="block_info2 ">
<div class="number">
<div class="num">A</div>
</div>
<div class="content">
<div class="text">
<p class="name">AUDI</p>
<p><b>Audi</b> ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi...</p>
</div>
<img class="text-img" src="audi-q5.jpg" alt="Audi">
</div>
</div>
Оформление основного блока:
.block_info2{
width: 360px;
height: 178px;
margin: 0 15px 15px;
position: relative;
cursor: pointer;
border: 1px solid #cccaca;
}
Левая часть — блок с буквой (на этом месте может быть любой знак, иконка) в кружке.
.number {
background: #fff; /* Цвет фона */
background-size: 50%; /* Размер фонового изображения */
width: 78px;
height: 176px;
float: left;
border: 1px solid #ddd;
border-right: none;
}
.num {
background: #c4e0f2; /* Цвет фона кружка */
width: 60px; /*Размеры блока, обязательно одинаковые, иначе вместо круга получим овал */
height: 60px;
border: 2px solid #fff; /* Граница цвета фона, позволяет "отодвинуть" тень от блока. */
border-radius: 50%; /* Позволяет из квадрата сделать круг или овал (смотри выше) */
box-shadow: 1px 1px 3px -2px #333; /* Тень */
font-size: 2.5em;
line-height: 60px;
margin: 55px auto 0;
text-align: center;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.block_info2:hover div.number{
background-size: 50% auto;
}
/* Изменение тени и вращение при анимации */
.block_info2:hover div.number div.num {
box-shadow: 0 0 3px -1px #333;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Правая часть — текст и картинка.
.content {
float: right; /* Прижат к правой стороне */
height: 178px; /* Высота блока, равна высоте блока с классом .block_info2 */
overflow: hidden;
position: relative;
width: 280px;
}
.text {
background:#fefefe;
border: 1px solid #ddd;
height: 176px;
width: 280px;
}
.text p {
margin: 0 20px;
}
.text p.name {
font-size: 1.6em;
margin-bottom: 10px;
margin-top: 40px;
}
img.text-img {
position: absolute;
top: 168px;
/*При высоте блока 178рх (смотри выше) картинка опущена на 168рх, поэтому снизу "выглядывает" только ее часть*/
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
/* При анимации картинка "всплывает вверх и становиться полупрозрачной*/
.block_info2:hover div.content img.text-img {
opacity: 0.85;
top: 0;
}
Пример 3
Следующие 2 примера практически одинаковы, но есть небольшое «геометрическое» отличие: вертикальная и горизонтальная анимации. Код каждого блока одинаковый, различаются только фоновыми рисунками, ну и цифровыми индексами соответственно: bgrd_1, bgrd_2, bgrd_3, bgrd_4. В качестве примера приведен код только для 2 блоков:
<div class="block_info bgrd_1">
<div class="binfo_wrap">
<div class="binfo-info">
<div class="binfo-info-front bgrd_1"></div>
<div class="binfo-info-back">
<p class="zh3">Заголовок 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ..</p>
</div>
</div>
</div>
</div>
<div class="block_info bgrd_2">
<div class="binfo_wrap">
<div class="binfo-info">
<div class="binfo-info-front bgrd_2"></div>
<div class="binfo-info-back">
<p class="zh">Заголовок 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ...</p>
</div>
</div>
</div>
</div>
Стили, за исключением указанных ниже для разных анимаций, схожи. Конечно каждый волен выбирать оформление в своем вкусе.
.block_info {
width: 356px;
height: 222px;
margin: 15px ;
float: left;
position: relative;
box-shadow: 3px 3px 7px rgba(0,0,0,0.5);
}
.block_info:hover .binfo-info-front {
box-shadow: 3px -3px 12px rgba(0,0,0,1);
/* Для вертикальной анимации */
-webkit-transform: rotate3d(1,0,0,-180deg);
-moz-transform: rotate3d(1,0,0,-180deg);
-o-transform: rotate3d(1,0,0,-180deg);
-ms-transform: rotate3d(1,0,0,-180deg);
transform: rotate3d(1,0,0,-180deg);
или
/* Для горизонтальной анимации */
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
}
/* Цвет фона под текстом анонса */
.block_info:hover .binfo-info-back{
background: rgba(224, 179, 119, 0.67);
}
/* Фоновые рисунки на все 4 блока*/
.bgrd_1 {
background-image: url(img_1.jpg);
}
.bgrd_2 {
background-image: url(img_2.jpg);
}
.bgrd_3 {
background-image: url(img_3.jpg);
}
.bgrd_4 {
background-image: url(img_4.jpg);
}
.binfo_wrap, .binfo-info{
position: absolute;
width: 356px;
height: 222px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
-o-perspective: 1300px;
-ms-perspective: 1300px;
perspective:1300px;
}
.binfo_wrap{
top: 0;
left:0;
background: #f9f9f9; /* Маскирующий фон, если его убрать тоже неплохой эффект получается */
}
.binfo-info{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.binfo-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.binfo-info .binfo-info-front {
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
/* Для вертикальной анимации */
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100% ;
или
/* Для горизонтальной анимации */
-webkit-transform-origin:100% 50% ;
-moz-transform-origin:100% 50% ;
-o-transform-origin:100% 50% ;
-ms-transform-origin:100% 50% ;
transform-origin:100% 50% ;
}
p.zh {
font-size: 20px;
font-style: italic;
text-align: center;
margin: 15px;
}
.binfo-info-back p {
padding: 0 15px;
}
И вот, что из этого получается:
Заголовок 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ..
Заголовок 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ..
Пример 4
В данном варианте приведен некий текст, который предлагает скачать какую то информацию. Наводим курсор на картинку и видим ссылку на нужный вам материал.
Полный код этой демо-странички рассматривать нет смысла, рассмотрим только то, что касается анимации. Код блоков идентичен, отличие в фоновых картинках. Итак:
HTML
<div class="block_info">
<div class="bi-info">
<a href="#" class="con">Скачать</a>
</div>
<div class="binfo-thumb bgrd_1"></div>
</div>
<div class="block_info">
<div class="bi-info">
<a href="#" class="con">Скачать</a>
</div>
<div class="binfo-thumb bgrd_2"></div>
</div>
<div class="block_info">
<div class="bi-info">
<a href="#" class="con">Скачать</a>
</div>
<div class="binfo-thumb bgrd_3"></div>
</div>
CSS
/* Нижний блок - основа */
.block_info {
width: 190px;
height:190px ;
border-radius: 50%;
position: relative;
margin:24px 15px;
float: left;
box-shadow: 1px 1px 7px rgba(0,0,0,1);
}
/* Нижний блок со ссылкой и его фоновый рисунок */
.bi-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: url(img_4.jpg);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
/* Оформление ссылки */
a.con{
font-family: Arial, sans-serif;
color: #7297e0;
font-size: 20px;
line-height: 150px;
padding-left: 40px;
text-decoration: none;
font-style:italic;
letter-spacing: 4px;
text-align: center;
text-shadow:0px 0px 0 rgb(82,119,192),1px 0px 0 rgb(52,89,162), 2px 0px 0 rgb(22,59,132),3px 0px 2px rgba(0,0,0,0.25),
3px 0px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
a.con:hover {
text-decoration:underline;
}
/* Верхний блок */
.binfo-thumb {
width: 190px;
height: 190px;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* Фоновые рисунки верхних блоков */
.bgrd_1 {
background-image: url(img_1.jpg);
z-index: 12;
}
.bgrd_2 {
background-image: url(img_2.jpg);
z-index: 11;
}
.bgrd_3 {
background-image: url(img_3.jpg);
z-index: 10;
}
/* Создание "поворотной оси" (черная точка с правой стороны) */
.binfo-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
/* При наведении верхний блок сдвигается на 110 градусов против часовой стрелки */
.block_info:hover .binfo-thumb {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
transform: rotate(-110deg);
}
Пример 5
headline
A wonderful serenity has taken possession of my entire soul, like thse .
Для блока напишем следующий код.
HTML
<div class="view">
<img src="pic_1.jpg" alt="Картинка">
<div class="mask">
<h2>headline</h2>
<p>A wonderful serenity has taken possession of my entire soul, like thse .</p>
<a href="#">Transition on click</a>
</div>
</div>
Оформляем блоки в таблице стилей. Цвета, размеры, отступы и др., как обычно на свой вкус, но есть обязательные условия, которые тоже можно корректировать при необходимости.
CSS
.view{
font-family: sans-serif;
width: 300px;
height: 186px;
float: left;
margin: 50px;
border: 10px solid transparent;
box-shadow: 1px 1px 8px rgba(170, 170, 170, 0.49);
/* Обязательные условия*/
position: relative;
overflow: hidden;
}
.view .mask{
width: 300px;
height:186px;
text-align: center;
/* Обязательные условия*/
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
Теперь очередь картинки, заголовка, анонса и ссылки. Здесь также есть обязательные условия, которые и обеспечивают анимацию.
С помощью свойства transform: translateY(…); заголовок «поднимаем вверх» на 100рх, а текст анонса соответственно «опускаем вниз» на 120рх.
Значения выбраны исходя из размеров блока и картинки. Также подлежат коррекции под необходимые значения.
Второе условие — «невидимость». Для этого используем свойство opacity: 0;. Благодаря этому условию ссылка никуда не убирается, просто не видна.
CSS
.view img {
-webkit-transition: all ease-in .5s;
transition: all ease-in .5s;
}
.mask h2 {
color: #4b4848;
font-size: 20px;
font-weight: 400;
line-height: 40px;
letter-spacing:1px;
margin-top: 10px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #0d0a0b;
background: rgba(248, 194, 71, 0.6);
/* Обязательные условия*/
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: all .5s;
transition: all ease-in .5s;
opacity: 0;
}
.mask p {
color: #fff;
padding: 10px;
margin-bottom: 25px;
text-shadow: 1px 0 2px #000;
background: rgba(105, 98, 82, 0.49);
/* Обязательные условия*/
-webkit-transform: translateY(120px);
-ms-transform: translateY(120px);
transform: translateY(120px);
-webkit-transition: all.5s ease-in .1s;
transition: all.5s ease-in .1s;
opacity: 0;
}
a.info {
color:#2e9beb;
font-size: 18px;
letter-spacing:1px;
text-decoration: none;
background: rgba(245, 177, 22, 0.75);
text-shadow: 1px 1px 1px #1c3764;
box-shadow: 1px 1px 3px #444;
border: 1px solid rgba(167, 130, 48, 0.8);
border-radius: 5px;
padding:10px;
/* Обязательные условия*/
opacity: 0;
-webkit-transition: all ease-in .5s;
transition: all ease-in .5s;
}
Осталось навести курсор на картинку и увидеть результат: заголовок «выезжает» сверху, текст анонса — снизу, а ссылка плавно проявляется.
CSS
.view:hover img{
opacity: 0.25;
box-shadow: 3px 3px 5px #000;
-webkit-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
.view:hover h2{
opacity: 1;
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view:hover p{
opacity: 1;
-webkit-transform: translatex(0px);
-ms-transform: translatex(0px);
transform: translatex(0px);
-webkit-transition: all ease-in .5s;
transition: all ease-in .5s;
}
.view:hover a{
cursor: pointer;
opacity:1;
-webkit-transition: opacity .3s ease-in .5s;
transition: opacity .3s ease-in .5s;
}
a:active{
box-shadow: none;
background: #2bcade;
color:rgb(252, 179, 14);
}