CSS浮动块

移动光标

您好亲爱的新手网站管理员。

每个人在悬停时都会遇到动画菜单项和其他项目。

此效果由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效果,这将排除其他变换位置的绘制。

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注