Эта анимация создаёт эффект, будто элемент «приподнимается» над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)).
Это статья из цикла заметок по CSS анимации и эффектам.
Области применения
- Кнопки
- Карточки товаров
- Блоки с контентом
- Любые кликабельные элементы
Пример, того как это выглядит (наведите курсор на карточку):
Карточка
Вот пример на чистом CSS / HTML
|
1 |
<div class="card">Карточка</div> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, transform 0.3s ease; } .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); transform: translateY(-5px); } |
Как это работает:
- В обычном состоянии у блока небольшая тень.
- При наведении тень становится больше и «глубже», а сам блок чуть сдвигается вверх.
transitionделает этот эффект плавным.
Вариации:
Только усиление тени без смещения:
|
1 2 3 |
.card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); } |
Добавление лёгкого увеличения (scale):
|
1 2 3 4 |
.card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); transform: scale(1.03); } |
Более мягкое движение (через cubic-bezier):
|
1 2 3 |
.card { transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } |