<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易3D导航栏</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{background-color:#000000;perspective:800px}/*perspective:描述眼睛到电脑屏幕的距离值;景深,摄像头*/
.nav{
width:460px;
height:40px;
background-color:green;/*设置背景*/
margin:100px auto;/*上下外边距100 左右外边距自动居中*/
animation:go 2s infinite;/*动画无数次*/
}
.nav:hover{
animation-play-state:paused;/*animation-play-state 属性规定动画正在运行还是暂停。*/
}
@keyframes go{/*定义动画,动画名字*/
0%{transform:rotateY(30deg)}/*css3变换属性L:旋转 正值顺时针*/
50%{transform:rotateY(-30deg)}
100%{transform:rotateY(30deg)}
}
*{margin:0;padding:0;}
.nav ul{
list-style:none;/*出去默认小圆点*/
background-color:#669900;
}
.nav ul.title > li{/*>子代选择器*/
position:relative;/*参考物*/
float:left;
width:90px;
height:40px;
background-color:#3300ff;
border:1px solid #fff;
}
.nav ul li h3{
width:90px;
height:40px;
color:#fff;/*设置文字的颜色*/
text-align:center;/*设置一行文字所占的高度*/
line-height:40px;/*设置一行文字所占的高度*/
}
.nav ul.title li:hover h3{
color:#0f6a52;
}
.nav ul.title li:hover:after{
width:90px;
}
.nav ul.title li:hover ul.list{/*当鼠标移动上去的时候,改变什么值*/
height:168px;
transition:1s;/*动画过渡的时间,0.5s可以简写成.5s节省文档的字节数*/
}
.nav ul.title ul.list{
overflow:hidden;/*超出隐藏*/
height:0px;
}
.nav ul.title ul.list li{
border-bottom:2px solid #000;
background-color:#88885e;
color:#fff;
text-align:center;
line-height:40px;
}
.nav ul.title >li:after{/*after伪元素的作用:在元素内容之后添加内容*/
content:'';/*激活伪元素的必要条件*/
position:absolute;/*要进行地位的元素*/
top:0;
left:0;right:0;
width:0px;
height:40px;
margin:auto;
background-color:rgba(5,64,143,.6);
transition:.5s;
}
</style>
</head>
<body>
<div class='nav'>
<ul class='title'>
<li>
<h3>首页</h3>
<ul class='list'>
<li>关于我们</li>
<li>团队建设</li>
<li>了解我们</li>
<li>帮助中心</li>
</ul>
<div class='hide'>
</div>
</li>
<li>
<h3>html</h3>
<ul class='list'>
<li>p</li>
<li>span</li>
<li>a</li>
<li>i</li>
</ul>
</li>
<li>
<h3>css</h3>
<ul class='list'>
<li>width</li>
<li>height</li>
<li>opacity</li>
<li>color</li>
</ul>
</li>
<li>
<h3>js</h3>
<ul class='list'>
<li>window</li>
<li>document</li>
<li>Math</li>
<li>Date</li>
</ul>
</li>
<li>
<h3>H5</h3>
<ul class='list'>
<li>header</li>
<li>footer</li>
<li>side</li>
<li>nav</li>
</ul>
</li>
</ul>
</div>
</body>
</html>