Плавающий блок CSS

Наведи курсор

Здравствуйте уважаемые начинающие веб-мастера.

Всем встречались оживающие пункты меню и другие элементы при наведении курсора.

Создаётся такой эффект свойством CSS transition, а 3D эффект свойством box-shadow.

Величина и направление перемещения задаются свойством transform, причём изменяя значения в этом свойстве, можно задать не только линейное перемещения в любом направлении, но и наклоны на заданный угол.

Пример элемента в начале статьи.

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.element {
  color: rgba(0, 0, 0, 0.8);
  padding: 30px 5px 0 5px;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 80px;
  background-color: #fff;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

.element:hover {
  -webkit-transform: translate(10px);
  transform: translate(10px);
}

.element:hover:after {
    opacity: 1;
}
</style>
</head>
<body>
<div class="element">Наведи курсор</div>
</body>
</html>

Обратите внимание как в этом примере реализован 3D эффект. Тень заданная в псевдоэлементе :after присутствует с самого начала, но полностью прозрачная.

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

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

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

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