首页 > 代码库 > css实现鼠标移入滑动显示功能
css实现鼠标移入滑动显示功能
鼠标移上去,元素位置移动,显示隐藏功能效果。(推荐在火狐或谷歌中观看,会有有动画效果)
效果如图:
css:
.box {
width: 200px;
height: 300px;
position: relative;
margin: 200px auto 0 auto;
}
.box:hover .img {
top: -45px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.img {
width: 192px;
height: 292px;
position: absolute;
top: 0;
left: 0;
padding: 3px;
border: 1px solid #e5e5e5;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.img div {
width: 192px;
height: 292px;
background: #f7f7f7;
}
.btn {
width: 70px;
height: 25px;
line-height: 25px;
position: absolute;
display: block;
left: 50%;
bottom: 10px;
margin-left: -35px;
background: #ff464f;
text-decoration: none;
text-align: center;
font-size: 12px;
color: #fff;
}
html:
<div class="box">
<a href="http://www.mamicode.com/#" class="btn">确定</a>
<div class="img"><div></div></div>
</div>
css实现鼠标移入滑动显示功能