CSS3制作凤凰网导航

2020-01-27 14:17:28

字体：大中小

来源：转载

供稿：网友

CSS3制作凤凰网导航，所使用的技术并不复杂，你了解了：box-shadow,CSS制作图形，旋转，动画，这样制作这个效果就不会有压力。
　　qq群:197326136

<!DOCTYPE html><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><title>CSS3制作凤凰网导航</title><link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'><style type="text/css">		*{			margin: 0;			padding: 0;		}		body {			font-size: 12px;			font-family: 'Covered By Your Grace', cursive;			padding: 100px;		}		.container {			width: 960px;			margin: 0 auto;		}		/*menu style start*/		#nav {			width: 960px;			margin: 50px auto;			background: #8c319c;			color: #fff;			position:relative;			box-shadow: -1px 0 0 #732184,-2px 0 0 #732184,-3px 0 0 #732184,-4px 0 0 #732184,-5px 0 0 #732184,-6px 0 0 #732184,-7px 0 0 #732184,-8px 0 0 #732184,-9px 0 0 #732184,-10px 0 0 #732184;			border-top: 10px solid #000;			float: left;			width: 100%;		}		#nav::before {			content:"";			border: 5px solid #732184;			border-color:#732184 #732184 #cecece #cecece;			position: absolute;			bottom: 0;			left: -10px;			width: 0;			height: 0;			display: block;			z-index:2;		}				#nav::after {			content:"";			width: 10px;			height: 9px;			background: #000;			position: absolute;			top: -9px;			left: -10px;			display: block;		} 		#nav li {			float: left;			display: inline;		}		#nav a {			display: block;			float: left;			padding: 10px 15px;			text-decoration: none;			text-transform: uppercase;			color: #fff;			font-weight: bold;			font-size: 24px;			box-shadow: 2px 0 0 rgba(255,255,255,0.5);			-webkit-transition: all 0.5s ease-in .218s;			-moz-transition: all 0.5s ease-in .0038s;			-o-transition: all 0.5s ease-in .0038s;			transition: all 0.5s ease-in .0038s;		}		#nav .sub-menu {			position: absolute;			left: 0;			top: 100%;			background: #eff7f7;			right: 0;			box-shadow: -1px 0 0 #cecece,-2px 0 0 #cecece,-3px 0 0 #cecece,-4px 0 0 #cecece,-5px 0 0 #cecece,-6px 0 0 #cecece,-7px 0 0 #cecece,-8px 0 0 #cecece,-9px 0 0 #cecece,-10px 0 0 #cecece;		}		#nav .sub-menu::before {			content:"";			border: 5px solid #cecece;			border-color:#cecece #cecece #fff #fff;			position: absolute;			bottom: 0;			left: -10px;			width: 0;			height: 0;			display: block;			z-index:2;		}				#nav .sub-menu a {			color: #000;			font-size: 20px;			font-weight: normal;		}		#nav a:hover,		#nav .expansion a {			background: #eff7f7;			color: #000;			box-shadow: 1px 0 0 #a5adad, 2px 0 0 #b5bdbd,3px 0 0 #a5adad;			padding-top: 14px;			margin-top: -4px;		}		#nav .sub-menu a {			background: none;			box-shadow: none;			padding-top: 10px;			margin-top: 0;		}		#nav .sub-menu a:hover {			color: rgb(140, 49, 156);		}	</style></head><body><div class="container">	<h1>CSS3制作凤凰网导航</h1>	<ul id="nav">		<li><a href="#">Home</a></li>		<li><a href="#">Blog</a></li>		<li class="expansion">			<a href="#">Tutorial</a>			<ul class="sub-menu">				<li><a href="#">css</a></li>				<li><a href="#">css3</a></li>				<li><a href="#">html</a></li>				<li><a href="#">html5</a></li>				<li><a href="#">jquery</a></li>				<li><a href="#">javascript</a></li>				<li><a href="#">php</a></li>			</ul>		</li>		<li><a href="demo2.html">Demo</a></li>		<li><a href="#">Contact</a></li>	</ul><p class="author" style="clear:both;padding-top: 50px;">作者：大漠<br>如有更好建议或疑问请加群：1041263</p></div>	</body></html>

上一篇：CSS3分享按钮

下一篇：CSS3折叠菜单，折纸效果的菜单