您好亲爱的新手网站管理员。
每个人在悬停时都会遇到动画菜单项和其他项目。
此效果由CSS属性transform创建，并由属性创建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>
伪元素 :after 之后指定的阴影从一开始就存在，但是完全透明。
当您将光标悬停时，将移除透明度并显示3D效果，这将排除其他变换位置的绘制。
祝你创造性的成功。
