前端案例：简易3D导航栏

<!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>
前端案例：简易3D导航栏

猜你喜欢
