准备多组CSS,比如:
.button1{
/*style1*/
}
.button2{
/*style2*/
}
2. 在用JavaScript修改Button的class,把button1改成button2,就实现了指向的CSS样式改变。
主要思路是利用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
}