emmm,今天浏览网站,看见了一个还不错的效果。鼠标经过盒子,盒子向上移,而且有阴影,看起来效果不错。
话不多说,直接做。
首先,我给div盒子加上了margin属性,这样盒子上移就不会出现挡住其它内容和动不了的情况。
margin: 40px 0 0 40px;
然后使用鼠标经过:hover属性来进行控制。
我新建三个盒子,并设置浮动。
<div class="aaa">
我是内容。
</div>
<div class="bbb">
我是内容。
</div>
<div class="ccc">
我是内容。
</div>
然后设置盒子的相关属性:
.aaa {
margin: 40px 0 0 40px;
width: 30%;
height: 400px;
float: left;
border: 1px solid #333333;
background-color: #E4393C;
}
.bbb {
margin: 40px 0 0 40px;
width: 30%;
height: 400px;
float: left;
border: 1px solid #333333;
background-color: #E4393C;
}
.ccc {
margin: 40px 0 0 40px;
width: 30%;
height: 400px;
float: left;
border: 1px solid #333333;
background-color: #E4393C;
}
最后使用box-shadow来为盒子加阴影:
.aaa:hover,.bbb:hover,.ccc:hover {
margin: 20px 0 0 40px;
box-shadow: 5px 8px 4px 2px #A9A9A9;
}
这样简单的效果就实现了。