实现鼠标悬停模块上移及出现投影
最近工作遇到的需求,记录一下~
需求
当鼠标移动到该模块时,模块上移并出现投影。
效果图
就是酱紫的交互效果
代码
html部分
<div class="box"></div>
CSS部分
.box{
width: 200px;
height: 200px;
background-color: cadetblue;
margin: 20px auto;
transition: all .3s ease;
}
.box:hover{
transform: translateY(-4px);
box-shadow: 10px 10px 10px rgba(0,0,0,.15);
}
就酱!你也没想到就这么给实现了吧哈哈哈哈