• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект анимации тени box-shadow на CSS (Как анимировать объекты с помощью CSS свойство box-shadow)
Эффект анимации тени box-shadow на CSS
Kosten
Дата: Четверг, 2018-09-13, 00:16 | Сообщение 1
Администраторы
Сообщений:18487
Награды: 55


В статье узнаете про анимацию теней, где при помощи свойство box-shadow можно создать красивый эффект объекту, который будет производиться при наведение клика. Если все изложить вкратце, то свойство box-shadow будет отлично для производительности. Также нужно понимать, что мало CSS свойства, которые могут быть анимированным без постоянного запуска перерисовки для каждого кадра, а именно opacityи transform.

Также есть отличный метод где можно прописать эффект, с минимальными повторными красками.



HTML

Код
<div class="vering-kacedus"></div>


CSS

Код
  .vering-kacedus {
    position: relative;
    display: inline-block;
    width: 95px;
    height: 95px;
    border-radius: 7px;
    background-color: #f1efef;
    box-shadow: 0 2px 3px rgba(33, 32, 32, 0.1);
    -webkit-transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

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

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

  .vering-kacedus:hover::after {
      opacity: 1;
  }


Демонстрация
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект анимации тени box-shadow на CSS (Как анимировать объекты с помощью CSS свойство box-shadow)
  • Страница 1 из 1
  • 1
Поиск: