这篇博客介绍了如何使用CSS实现当鼠标悬停在元素上时，元素上浮并添加阴影的效果。通过设置CSS的`transition`属性平滑过渡，`box-shadow`属性添加阴影，以及`transform`属性调整元素位置，可以创建出动态且美观的交互体验。
效果：
鼠标悬停元素时：元素上浮 添加阴影
实现代码：
HTML部分：
<body>
<div class="top">
<ul>
<li>第一个</li>
<li>第二个</li>
</ul>
</div>>
</body>
css部分：
<style>
.top{
width: 798px;
height: 410px;
border: 1px solid black;
}
.top ul li{
float: left;
border: 1px solid red;
width: 180px;
height: 180px;
list-style-type: none;
margin-bottom: 10px;
margin-left: 20px;
-webkit-transition: all .2s linear;
}
.top ul li:hover{
-webkit-box-shadow:0 15px 30px rgba(0,0,0,.1);
box-shadow:0 15px 30px rgba(0,0,0,.3); 注：（0.3阴影颜色的深浅）
-webkit-transform:translate3d(0,-10px,0); 注：（-10px上浮的距离）
}
</style>
1978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
