Плавающий блок 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 не будет опубликован. Обязательные поля помечены *