25.12.2015 06:42
eisenfox 2 5300 Источник
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.



Эффект #22

Пример

Для создания этого эффекта нам понадобится дополнить базовую html-структуру двумя блоками с изображениями и одним блоком с иконкой:

<div class="effect eff-22">
  <div class="img-block img-block-left">
    <img src="img/ef22.jpg" alt="Effect #22" />
  </div>
  <div class="img-block img-block-right">
    <img src="img/ef22.jpg" alt="Effect #22" />
  </div>
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


В данном эффекте, чтобы картинка распалась на две части, мы создаем два блока по половине ширины от блока с эффектом, в каждый из которых помещаем одну и ту же картинку. Вот общие для обоих блоков стили:

.eff-22 .img-block {
  height: 100%;
  width: 50%;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  transition: all 0.3s linear 0s;
}


Чтобы блоки расходились в разные стороны указанным образом, нам надо задать для них точку, относительно которой будет происходить анимация. Вот стили для каждого блока отдельно:

.eff-22 .img-block-left {
  top: 0px;
  left: 0px;
  transform-origin: right bottom;
}

.eff-22 .img-block-right {
  top: 0px;
  right: 0px;
  transform-origin: left bottom;
}


Сейчас у нас и в правом, и в левом блоке отображается по одному и тому же кусочку картинки, поэтому в правом блоке мы сместим картинку влево на 50%:

.eff-22 .img-block-right img {
  transform: translate(-50%, 0);
}


Теперь стилизуем .caption. Мы делаем блок прозрачным, чтобы, пока подгружаются картинки, .caption не было видно:

.eff-22 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  transition: all 0.01s linear 0.3s;
}


У внутренних элементов .caption сохраняются дефолтные стили.

И стилизуем .overlay: подробнее о составлении равнобедренных треугольников я рассказывала в эффекте #19.

.eff-22 .overlay {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  border: 150px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  transition: all 0.2s linear 0.2s;
}

.eff-22 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 17px;
  left: -18px;
}


Собираем эффект.

Сжимаем .overlay:

.eff-22:hover .overlay {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  transition-delay: 0s;
}

.eff-22:hover .overlay .icon {
  opacity: 0;
}


Стилизуем “распадающуюся” картинку:

.eff-22:hover .img-block-left {
  transform: rotate(-90deg);
}

.eff-22:hover .img-block-right {
  transform: rotate(90deg);
}

.eff-22:hover .img-block {
  transition-delay: 0.2s;
}


Убираем прозрачность .caption:

.eff-22:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}


Эффект #23

Пример

Для создания этого эффекта нам понадобится дополнить базовую html-структуру двумя блоками с изображениями и одним блоком с иконкой:

<div class="effect eff-23">
  <div class="img-block img-block-top">
    <img src="img/ef23.jpg" alt="Effect #23" />
  </div>
  <div class="img-block img-block-bottom">
    <img src="img/ef23.jpg" alt="Effect #23" />
  </div>
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Чтобы картинка раскрывалась на две части, мы, как и в эффекте #22, создаем два блока, каждый из которых занимает половину высоты блока с эффектом, и в каждый из этих блоков кладем одну и ту же картинку. Общие стили для обоих блоков:

.eff-23 .img-block {
  height: 50%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  transition: all 0.3s linear 0s;
}


Чтобы блоки “сжимались” относительно верхней и нижней границы блока с эффектом, нам надо задать transform-origin для каждого из них:

.eff-23 .img-block-top {
  top: 0px;
  left: 0px;
  transform-origin: top;
}

.eff-23 .img-block-bottom {
  bottom: 0px;
  left: 0px;
  transform-origin: bottom;
}


Теперь мы можем видеть и на верхнем, и на нижнем блоке одну и ту же часть изображения, поэтому подвинем изображение в нижнем блоке на 50% вверх, чтобы стало видно его нижнюю часть:

.eff-23 .img-block-bottom img {
  transform: translate(0, -50%);
}


Теперь стилизуем .caption. Мы делаем блок прозрачным, чтобы, пока подгружаются картинки, .caption не было видно:

.eff-23 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  transition: all 0.01s linear 0.3s;
}


У внутренних элементов .caption сохраняются дефолтные стили.

Стилизуем .overlay: подробнее о составлении равнобедренных треугольников я рассказывала в эффекте #19.

.eff-23 .overlay {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  border: 150px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  transition: all 0.2s linear 0.1s;
}

.eff-23 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 17px;
  left: -18px;
}


Собираем эффект.

Сжимаем блоки с картинками к краям блока с эффектами:

.eff-23:hover .img-block {
  transform: scaleY(0);
  transition-delay: 0.2s;
}


Убираем .overlay:

.eff-23:hover .overlay {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  transition-delay: 0s;
}

.eff-23:hover .overlay .icon {
  opacity: 0;
}


Возвращаем .caption непрозрачность:


.eff-23:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}


Эффект #24

Пример

Для создания этого эффекта нам необходимо дополнить дефолтную html-структуру четырьмя блоками с картинками внутри и блоком с иконкой:

<div class="effect eff-24">
  <div class="img-block img-block-1">
    <img src="img/ef24.jpg" alt="Effect #24" />
  </div>
  <div class="img-block img-block-2">
    <img src="img/ef24.jpg" alt="Effect #24" />
  </div>
  <div class="img-block img-block-3">
    <img src="img/ef24.jpg" alt="Effect #24" />
  </div>
  <div class="img-block img-block-4">
    <img src="img/ef24.jpg" alt="Effect #24" />
  </div>
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Чтобы создать такой эффект поднимающейся “шторки”, необходимо взять четыре блока и поместить в них одну и ту же картинку. Высота каждого блока составляет четверть от высоты блока с эффектом:

.eff-24 .img-block {
  width: 100%;
  height: 25%;
  position: absolute;
  overflow: hidden;
  left: 0px;
}


Каждый блок располагается ниже предыдущего на 25%, а изображение в каждом следующем блоке поднимается на 25% относительно положения картинки в предыдущем блоке (более подробно о такой организации блоков и картинок можно почитать в описании эффектов #7-9). Поскольку, при наведении, четвертый блок уходит вверх и прячется под третий, потом они оба уходят еще выше и прячутся под второй, а потом все три — под первый, самый большой z-index будет у первого блока, а самый маленький — у четвертого. Вот стили для всех четырех блоков и их изображений:

.eff-24 .img-block-1 {
  top: 0px;
  z-index: 5;
  transition: all 0.15s linear 0s;
}

.eff-24 .img-block-2 {
  top: 25%;
  z-index: 4;
  transition: all 0.3s linear 0s;
}

.eff-24 .img-block-2 img {
  transform: translateY(-25%);
}

.eff-24 .img-block-3 {
  top: 50%;
  z-index: 3;
  transition: all 0.45s linear 0s;
}

.eff-24 .img-block-3 img {
  transform: translateY(-50%);
}

.eff-24 .img-block-4 {
  top: 75%;
  z-index: 2;
  transition: all 0.6s linear 0s;
}

.eff-24 .img-block-4 img {
  transform: translateY(-75%);
}


Теперь стилизуем .caption. Мы делаем блок прозрачным, чтобы, пока подгружаются картинки, .caption не было видно:

.eff-24 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  transition: all 0.01s linear 0.6s;
}


У внутренних элементов .caption сохраняются дефолтные стили.

Стилизуем .overlay. Подробнее о составлении равнобедренных треугольников я рассказывала в эффекте #19.

.eff-24 .overlay {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  border: 150px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  transition: all 0.2s linear 0.5s;
}

.eff-24 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 17px;
  left: -18px;
}


Собираем эффект.

Задача — убрать все блоки с изображениями так, чтобы скрыть даже самый первый блок за пределы блока с эффектом. Таким образом, поднимем их все до 25% выше верхнего края блока с эффектом:

.eff-24:hover .img-block {
  top: -25%;
}


Эффект “шторки” достигается комбинацией времени, выделенного на анимацию (мы прописывали это выше) и задержки подъема:

.eff-24:hover .img-block-3 {
  transition-delay: 0.15s;
}

.eff-24:hover .img-block-2 {
  transition-delay: 0.3s;
}

.eff-24:hover .img-block-1 {
  transition-delay: 0.45s;
}


Убираем .overlay:

.eff-24:hover .overlay {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  transition-delay: 0s;
}

.eff-24:hover .overlay .icon {
  opacity: 0;
}


Делаем .caption непрозрачным:

.eff-24:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}


Эффект #25

Пример

Для создания этого эффекта в дефолтную html-структуру включен блок с иконкой и три блока, которые будут поочередно появляться:

<div class="effect eff-25">
  <img src="img/ef25.jpg" alt="Effect #25" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="flash flash-1"></div>
  <div class="flash flash-2"></div>
  <div class="flash flash-3"></div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Начнем со стилей для .flash блоков. Их три, они занимают по трети высоты блока с эффектом каждый:

.eff-25 .flash {
  position: absolute;
  width: 100%;
  height: 100px;
  opacity: 0;
  left: 0px;
  background: rgba(255,255,255,0.4);
}

.eff-25 .flash-1 {
  top: 0px;
}

.eff-25 .flash-2 {
  top: 100px;
}

.eff-25 .flash-3 {
  top: 200px;
}


Теперь стилизуем .overlay, у которого сначала изменяется ширина, и он словно растягивается, а потом положение относительно блока, поскольку он отъезжает влево, за пределы блока с эффектом:

.eff-25 .overlay {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 130px;
  left: 0px;
  background: rgba(255,255,255,0.6);
  transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
}

.eff-25 .overlay:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0px;
  top: 0;
  left: 100%;
  border: 20px solid transparent;
  border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-25 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 83%;
  z-index: 10;
}


Прячем .caption за нижний край блока с эффектом и даем ей более сложный transition-timing-function:

.eff-25 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
}


Стили элементов .caption остаются дефолтными.

Теперь наша задача сделать так, чтобы при наведении сначала один .flash появлялся и исчезал, и только потом появлялся следующий. Чтобы это сделать, мы должны воспользоваться свойством animation и сопутствующим ему @keyframes. Начнем с @keyframes: он нужен для того, чтобы задать имя будущей анимации и ключевые точки, который проходит в своем движении анимируемый элемент. У .flash есть три ключевый точки:

  1. начальная, в которой он прозрачен
  2. средняя, в которой он появляется
  3. конечная, в которой он снова прозрачен


Таким образом, мы можем задать такой @keyframes, где flash — это имя анимации: 

@keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}


Теперь собираем эффект.

При наведении нам нужно запустить анимацию. Для этого мы используем свойство animation. Здесь мы используем три параметра: имя, время, необходимое на прохождение всех ключевых точек каждой вспышки и animation-timing-function, аналогичная transition-timing-function.

.eff-25:hover .flash {
  animation: flash 0.3s linear;
}


Теперь, если посмотреть, что получилось, станет видно, что все .flash вспыхивают одновременно и гаснут, таким образом, нам надо использовать еще один параметр animation — задержку, работающую аналогично задержке для transition:

.eff-25:hover .flash-1 {
  animation-delay: 0.45s;
}

.eff-25:hover .flash-2 {
  animation-delay: 0.55s;
}

.eff-25:hover .flash-3 {
  animation-delay: 0.65s;
}


Добавляем “растяжение” и исчезновение .overlay:

.eff-25:hover .overlay {
  width: 170px;
  left: -190px;
}


И поднимаем .caption:

.eff-25:hover .caption {
  top: 0px;
  transition-delay: 0.8s;
}


Эффект #26

Пример

Для создания этого эффекта необходимо добавить в дефолтную структуру блок с иконкой и блок-полоску, который будет видно при наведении:

<div class="effect eff-26">
  <img src="img/ef26.jpg" alt="Effect #26" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="flash"></div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Начнем со стилизации полоски. Это узкий длинный блок, который будет опускаться и подниматься при наведении. Он вынесен в начальную точку анимации: вверх, за пределы блока с эффектом. 

.eff-26 .flash {
  position: absolute;
  left: -200px;
  top: -200px;
  background-color: rgba(255,255,255,0.6);
  width: 590px;
  height: 100px;
  transform: rotate(-25deg);
}


Теперь зададим @keyframes для определения ключевых точек анимации (подробнее про это написано в эффекте #25):

@keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}


Зададим стили для .overlay, о котором подробнее тоже рассказано в эффекте #25:

.eff-26 .overlay {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 130px;
  left: 0px;
  background: rgba(255,255,255,0.6);
  transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
}

.eff-26 .overlay:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0px;
  top: 0;
  left: 100%;
  border: 20px solid transparent;
  border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-26 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 83%;
  z-index: 10;
}


И зададим прозрачность для .caption:

.eff-26 .caption {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  transition: all 0.2s linear 0s;
}


У внутренних элементов .caption остаются дефолтные стили.

Собираем эффект.

Запускаем анимацию блока с полоской. Как видите, здесь используется больше параметров свойства animation, чем в прошлом эффекте. Кроме названия анимации, времени и animation-timing-function используется еще:

  1. iteration-count — сколько раз будем проигрывать анимацию. В данном случае — дважды: сверху вниз и снизу вверх.
  2. animation-direction — показывает, будет ли элемент проходить ключевые точки в прямом порядке (от from к to) или в обратном (от to к from). Значение alternate означает, что в каждый нечетный проигрыш анимация будет идти в прямом порядке, а в каждый четный — в обратном, вот почему первый раз полоска движется сверху вниз, а второй раз — снизу вверх.


.eff-26:hover .flash {
  animation: flash-movement 0.4s linear 0.45s 2 alternate;
}


Убираем .overlay:

.eff-26:hover .overlay {
  width: 170px;
  left: -190px;
}


Меняем прозрачность .caption:

.eff-26:hover .caption {
  opacity: 1;
  transition-delay: 0.8s;
}


Эффект #27

Пример

Для работы с этим эффектом необходимо дополнить дефолтную html-структуру блоком с иконкой и блоком с кругом:

<div class="effect eff-27">
  <img src="img/ef27.jpg" alt="Effect #27" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="circle">
    <div class="half-circle half-circle-left"></div>
    <div class="half-circle half-circle-right"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Начнем с блока с кругом, который появляется при наведении. Стили для самого блока:

.eff-27 .circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  opacity: 0;
}


При наведении круг распадается на две половины, чтобы это осуществить, соберем его из двух полукруглых блоков, которые и будем потом отодвигать друг от друга:

.eff-27 .circle .half-circle {
  background: rgba(255,255,255,0.6);
  width: 50px;
  height: 100px;
  position: absolute;
}

.eff-27 .circle .half-circle-left {
  top: 0px;
  left: 0px;
  border-radius: 100px 0px 0px 100px;
}

.eff-27 .circle .half-circle-right {
  top: 0px;
  right: 0px;
  border-radius: 0px 100px 100px 0px;
}


Теперь создаем @keyframes для каждого из полукруглых блоков. Подробнее о @keyframes я писала в эффекте #25. Как видим, каждый из полукругов проходит три ключевых точки:

  1. полукруг находится на своем дефолтном месте и является частью круга
  2. он отходит в сторону, уменьшается в размерах и превращается в полноценный круг
  3. улетает за пределы блока с эффектом


@keyframes half-circle-left {
  from {
    top: 0px;
    left: 0px;
    border-radius: 100px 0px 0px 100px;
  }

  20% {
    top: 25px;
    left: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    left: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@keyframes half-circle-right {
  from {
    top: 0px;
    right: 0px;
    border-radius: 0px 100px 100px 0px;
  }

  20% {
    top: 25px;
    right: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    right: -500px;
    height: 50px;
    border-radius: 100px;
  }
}


Зададим стили для .overlay, о котором подробнее тоже рассказано в эффекте #25:

.eff-27 .overlay {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 130px;
  left: 0px;
  background: rgba(255,255,255,0.6);
  transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
}

.eff-27 .overlay:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0px;
  top: 0;
  left: 100%;
  border: 20px solid transparent;
  border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-27 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 83%;
  z-index: 10;
}


Уберем вниз .caption 

.eff-27 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.2s linear 0s;
}


У остальных элементов .caption остаются дефолтные стили.

Собираем эффект.

Сначала меняем прозрачность блока с кругом:

.eff-27:hover .circle {
  opacity: 1;
  transition-delay: 0.4s;
}


Потом вызываем анимации каждого из полукругов. Кроме параметров, рассмотренных в эффектах #25-26, мы используем тут один новый параметр: animation-fill-mode. Этот параметр определяет, какие стили применяются к анимированным элементам, когда анимация закончена или остановлена. По дефолту, после анимации элементы возвращаются в положение, заданное первой ключевой точкой @keyframes, что нам здесь совершенно не нужно, иначе прямо за .caption снова появится белый круг. Значение forwards необходимо для того, чтобы элементы оставались в положении, заданном последней ключевой точкой @keyframes, то есть, за пределами блока с эффектом:

.eff-27:hover .half-circle-left {
  animation: half-circle-left 1s linear 0.55s forwards;
}

.eff-27:hover .half-circle-right {
  animation: half-circle-right 1s linear 0.55s forwards;
}


Теперь убираем .overlay:

.eff-27:hover .overlay {
  width: 170px;
  left: -190px;
}


И выдвигаем вверх .caption:

.eff-27:hover .caption {
  top: 0px;
  transition-delay: 1s;
}


Эффект #28

Пример

Для работы с этим эффектом необходимо дополнить дефолтную html-структуру блоком с иконкой и блоком с полукруглой выемкой, который становится виден при наведении:

<div class="effect eff-28">
  <img src="img/ef28.jpg" alt="Effect #28" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="circle"></div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Начнем с блока с выемкой. Сам по себе этот блок — большая окружность с границей, ширина которой — 3px, расположенная так, чтобы только часть ее находилась в пределах блока с эффектом. Чтобы заполнить фоном все пространство блока с эффектом по левую сторону от окружности, дадим ей большую полупрозрачную тень:

.eff-28 .circle {
  width: 600px;
  height: 600px;
  border: 3px solid rgba(255,255,255,0.6);
  -webkit-border-radius: 300px;
  border-radius: 300px;
  position: absolute;
  bottom: -50px;
  left: 50px;
  box-shadow: 0px 0px 235px 1000px rgba(255,255,255,0.5);
  opacity: 0;
  transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s;
}


Теперь уменьшим размер .caption до нуля:

.eff-28 .caption {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transform: scale(0);
  transition: all 0.2s linear 0s;
}


У прочих элементов .caption остаются дефолтные стили.

Остается только стилизовать блок с иконкой. Вот его базовые стили:

.eff-28 .overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  border-radius: 500px;
  background: rgba(255,255,255,0.6);
}

.eff-28 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 39px;
  left: 33px;
}


Задача — прописать ему анимацию “подпрыгивания”, и для этого нам понадобится вот такой @keyframes (подробнее о @keyframes можно прочитать в эффекте #25). Элемент проходит пять ключевых точек:

  1. Исходное положение
  2. Ударяется о нижний край блока с эффектом
  3. Возвращается в исходное положение
  4. Ударяется о верхний край блока с эффектом
  5. Ускоряясь, улетает за край блока с эффектом 


@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}


Собираем эффект.

Сначала применяем анимацию к блоку с иконкой. Animation подробно рассматривался в эффекте #25, параметр animation-fill-mode в эффекте #27:

.eff-28:hover .overlay {
  animation: bounce 0.5s linear forwards;
}


Потом, изменяя прозрачность, ширину и высоту элемента с выемкой, создаем иллюзию движения этого блока:

.eff-28:hover .circle {
  opacity: 1;
  width: 400px;
  height: 400px;
  transition-delay: 0.35s;
}


И, наконец, увеличиваем .caption:

.eff-28:hover .caption {
  transform: scale(1);
  transition-delay: 0.9s;
}


Эффект #29

Пример

Для этого эффекта необходимо дополнить дефолтную html-структуру блоком с иконкой и квадратным блоком, появляющимся при наведении:

<div class="effect eff-29">
  <img src="img/ef29.jpg" alt="Effect #29" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="square"></div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Начнем с квадратного блока. Начальных стилей у этого блока совсем немного, потому что основные стили, включая transition, будут применены к нему только при наведении:

.eff-29 .square {
  width: 84%;
  height: 84%;
  position: absolute;
  top: 7%;
  left: 7%;
  border: 3px solid rgba(255,255,255,0.6);
  border-radius: 10px;
  transform: scale(0);
  opacity: 0;
}


Перемещаем .caption наверх, за пределы блока с эффектом:

.eff-29 .caption {
  position: absolute;
  top: -100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.2s linear 0s;
}


Внутренние элементы .caption сохраняют дефолтные стили.

Стилизуем блок с иконкой полностью аналогично этому же блоку из эффекта #28, где я рассматривала эти стили подробнее, здесь я только приведу сами стили и @keyframes:

.eff-29 .overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  border-radius: 500px;
  background: rgba(255,255,255,0.6);
}

.eff-29 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 39px;
  left: 33px;
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}


Собираем эффект.

Сначала добавляем стили для квадратного блока. Увеличиваем его в размерах, делаем его непрозрачным и добавляем тень, чтобы создать иллюзию наличия фона за границами квадрата. Почему мы добавляем transition только при наведении — потому что при отмене hover квадрат сразу должен исчезать.

.eff-29:hover .square {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0px 0px 200px 60px rgba(255,255,255,0.4);
  transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s;
}


Добавляем анимацию блока с иконкой, animation подробно рассматривался в эффекте #25, параметр animation-fill-mode в эффекте #27:

.eff-29:hover .overlay {
  animation: bounce 0.5s linear forwards;
}


И опускаем .caption:

.eff-29:hover .caption {
  top: 0px;
  transition-delay: 0.8s;
}


Эффект #30

Пример

Чтобы создать этот эффект, нам необходимо дополнить дефолтную html-структуру блоком с иконкой и блоком с пузырьками, в котором нужно создать столько блоков-пузырьков, сколько вы хотите видеть в вашем эффекте:

<div class="effect eff-30">
  <img src="img/ef30.jpg" alt="Effect #30" />
  <div class="overlay">
    <div class="icon"></div>
  </div>
  <div class="bubbles">
    <div class="bubble"></div>
    <div class="bubble bubble-2"></div>
    <div class="bubble bubble-3"></div>
    <div class="bubble bubble-4"></div>
    <div class="bubble bubble-5"></div>
    <div class="bubble bubble-6"></div>
    <div class="bubble bubble-7"></div>
    <div class="bubble bubble-8"></div>
    <div class="bubble bubble-9"></div>
    <div class="bubble bubble-10"></div>
    <div class="bubble bubble-11"></div>
    <div class="bubble bubble-12"></div>
    <div class="bubble bubble-13"></div>
  </div>
  <div class="caption">
    <h4>Title is Here</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
    </p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>


Начнем с блока с иконкой. Он полностью аналогичен этому же блоку из эффекта #28, где и можно прочитать про него подробнее, здесь я только приведу сами стили и @keyframes:

.eff-30 .overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  border-radius: 500px;
  background: rgba(255,255,255,0.6);
}

.eff-30 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 39px;
  left: 33px;
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}


Теперь прячем .caption за нижней границей блока с эффектом:

.eff-30 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  transition: all 0.4s linear 0s;
}


Внутренние элементы .caption сохраняют дефолтные стили.

Теперь самое интересное — блок с пузырьками и сами пузырьки.

Стили для блока с пузырьками:

.eff-30 .bubbles {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}


Стили для каждого пузырька (почитать подробнее про радиальные градиенты можно в эффекте #10):


.eff-30 .bubbles .bubble {
  width: 43px;
  height: 43px;
  position: absolute;
  top: 100%;
  background: radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
  border-radius: 300px;
}


Дальше наша задача расположить пузырьки по горизонтали вразнобой, чтобы они не поднимались в одном и том же месте:

.eff-30 .bubbles .bubble-2 {
  left: 20px;
}

.eff-30 .bubbles .bubble-3 {
  left: 60px;
}

.eff-30 .bubbles .bubble-4 {
  left: 90px;
}

.eff-30 .bubbles .bubble-5 {
  left: 120px;
}

.eff-30 .bubbles .bubble-6 {
  left: 150px;
}

.eff-30 .bubbles .bubble-7 {
  left: 250px;
}

.eff-30 .bubbles .bubble-8 {
  left: 300px;
}

.eff-30 .bubbles .bubble-9 {
  left: 190px;
}

.eff-30 .bubbles .bubble-10 {
  left: 220px;
}

.eff-30 .bubbles .bubble-11 {
  left: 270px;
}

.eff-30 .bubbles .bubble-12 {
  left: 45px;
}

.eff-30 .bubbles .bubble-13 {
  left: 15px;
}


И @keyframes (подробнее о котором я написала в эффекте #25) для них самый простой, состоящий из двух ключевых точек:


@keyframes bubble {
from {
  top: 100%;
  }
to {
  top: -100%;
  }
}


Собираем эффект.

Добавляем анимацию блока с иконкой, animation подробно рассматривался в эффекте #25, параметр animation-fill-mode в эффекте #27:

.eff-30:hover .overlay {
  animation: bounce 0.6s linear forwards;
}


Потом запускаем пузырьки. Вызываем анимацию для них. В данном случае мы используем, кроме прочих, рассмотреных в эффекте #25 параметров, параметр animation-iteration-count со значением infinite, что означает, что анимация будет проигрываться бесконечное количество раз. Пока курсор наведен на блок с эффектом, пузырьки не перестанут лететь:

.eff-30:hover .bubbles .bubble {
  animation: bubble 9s infinite;
}


Теперь, чтобы пузырьки вылетали еще и в разное время, выставим им задержку:

.eff-30:hover .bubbles .bubble-2 {
  animation-delay: 2s;
}

.eff-30:hover .bubbles .bubble-3 {
  animation-delay: 6s;
}

.eff-30:hover .bubbles .bubble-4 {
  animation-delay: 3.5s;
}

.eff-30:hover .bubbles .bubble-5 {
  animation-delay: 4s;
}

.eff-30:hover .bubbles .bubble-6 {
  animation-delay: 7.2s;
}

.eff-30:hover .bubbles .bubble-7 {
  animation-delay: 1s;
}

.eff-30:hover .bubbles .bubble-8 {
  animation-delay: 2.6s;
}

.eff-30:hover .bubbles .bubble-9 {
  animation-delay: 5s;
}

.eff-30:hover .bubbles .bubble-10 {
  animation-delay: 6.4s;
}

.eff-30:hover .bubbles .bubble-11 {
  animation-delay: 8s;
}

.eff-30:hover .bubbles .bubble-12 {
  animation-delay: 5.3s;
}

.eff-30:hover .bubbles .bubble-13 {
  animation-delay: 8.5s;
}


Остается только поднять .caption:

.eff-30:hover .caption {
  top: 0px;
  transition-delay: 0.7s;
}


Надеюсь, моя статья оказалась вам полезна и вдохновила на украшение ваших сайтов новыми, интересными эффектами!

Комментарии (2)


  1. dshster
    25.12.2015 11:45
    #8716415
    +2

    Всё это здорово, вот только ценители семантического html будут негодовать по поводу кучи тегов только ради оформления.
    Может быть этот материал вас вдохновит: http://projects.lukehaas.me/css-loaders/ — всё основывается на одном теге.


    1. eisenfox
      25.12.2015 14:46
      #8716709

      Спасибо за мнение =) Я буду очень рада, если в комментарии придет любитель семантического html и поделится опытом того, как именно он реализовал бы все эти эффекты в один тег. Как только встречу такого — сразу спрошу и вдохновлюсь =)