这里先解说下——这里有A /B 两个按钮，分别链接a/b.css， 只要单击按钮就可以实现改变头部id为change_css 的css文件。当你希望change_css一开始没有css只是点击按钮的时候才有css的话，那么你给change_css这个id的链接 href=“ ”
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<link id="change_css" rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<input type=button value="A按钮" onclick="document.all.change_css.href='a.css'">
<input type=button value="B按钮" onclick="document.all.change_css.href='b.css'">
</body>
</html>
主要思路是利用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
}
用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：
<div id="round"></div>
#round {
padding:10pxwidth:300pxheight:50px
border: 5px solid #dedede
-moz-border-radius: 15px /* Gecko browsers */
-webkit-border-radius: 15px /* Webkit browsers */
border-radius:15px /* W3C syntax */
}
效果如图：
