主要思路是利用hover来进行功能实现,transition-duration:来实现过度动画;
css这样实现

html如下

.download-block{
width:90%;
height:100px;
background:#0b0e32;
/*margin: 100px auto 0;*/
margin:0 auto;
position:absolute;
left:0;
right:0;
transition-duration:2s;
opacity:0.7;
}
.download-block1{
background:transparent;
height:100px;
overflow:hidden;
position:relative;
left:0;
top:-100px;
right:0;
padding-top:100px;
transition-duration:2s;
opacity:0.7;
cursor:pointer;
}
.download-block1:hover{
padding-top:0;
transition-duration:2s;
opacity:0.7;
}
网友评论