Последние:

Vavik96

Интернет-дайджест для вебмастеров и фотографов.

Web 

Красивая анимация блоков на CSS3

admin 0 Комментариев ,

Сегодня рассмотрим несколько примеров красивой анимации блоков при помощи 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

Чтобы увидеть следующую анимацию навидим курсор на блок.

A

AUDI

Audi ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.

Audi

Все начинается с 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 ..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit modi eius officia, porro deserunt vel voluptates, earum consectetur suscipit doloremque mollitia, error odio illum accusantium est deleniti labore, quae fugiat quo ut commodi nulla sed magni blanditiis? Ad nobis commodi ipsa. Nihil ullam praesentium doloribus perferendis aliquam dignissimos at voluptates officia laudantium sed dolores, ab provident harum iste, voluptatibus inventore quibusdam vero reprehenderit. Consectetur non, rerum commodi, et hic quos eaque ipsa eveniet! .

Пример 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

Рисунок 1

headline

A wonderful serenity has taken possession of my entire soul, like thse .

Transition on click

Для блока напишем следующий код.

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);
}

 

Источник

Вам также может понравиться

Простые подсказки на CSS3 и HTML5

admin 0

Быстрая установка кнопок CSS

admin 0

Фреймы в HTML

admin 1

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.