这里先解说下——这里有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
}
1. 登录CSS网站，搜索你想要的CSS导航，找到后点击下载；2. 下载后打开文件，复制CSS代码；
3. 在你的网页中新建一个HTML文件，将复制的CSS代码粘贴到文件中；
4. 在HTML文件中加入你想要的导航栏，比如：<ul><li><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="contact.html">联系我们</a></li></ul>
5. 将CSS代码中的类名称添加到HTML代码中，比如 <ul class="nav">
6. 保存文件，浏览器中打开，就可以看到你下载的CSS导航栏了。
