Анимированные тени для блока

Здравствуйте, сегдня рассмотрим css анимацию тени блока, которую можно использовать например в меню сайта или для кнопки.

Скачать исходники для статьи можно ниже

1. Html код блока:

<div class="box">
Пункт 1
</div>

Для примера, в wordpress можно разместить данный код в виджет “HTML” или “Текст”:

PS: Можно использовать не только тег div, а любые другие – главное прописать класс “box”:

<span class="box">1</span>

2. CSS код блока:

.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.box:hover::after {
    opacity: 1;
}

Данный код нужно вставить в файл style.css (в wordpress, пункт “Внешний вид”, подпункт “Редактор”):

Код можно разместить в самом низу файла style.css:

3. Если разместить несколько блоков подряд получится интересный эффект:

<div style="background-color:#faf86d; width: 400px; height:200px; padding-left: 20px; padding; padding-top: 20px;">

<div class="box">
Пункт 1
</div>
<div class="box">
Пункт 2
</div>
<div class="box">
Пункт 3
</div>

</div>

CSS код оставляем такой же.

Получится следующее: