www.gusucode.com > 纯CSS3动画旋转的二级菜单源码程序 > 纯CSS3动画旋转的二级菜单/navigation/navigation/assets/css/styles.css

    *{
	margin:0;
	padding:0;
}
/*Download by http://www.codesc.net*/
html{
	background:url('../img/bg_tile.jpg') #333d43;
	
}
footer a{
	color:#fff;
    text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	}
body{
	background:url('../img/bg_head.jpg') repeat-x top center, url('../img/bg_vert.jpg') repeat-x;
	min-height:500px;
	font:14px/1.3 'Microsoft YaHei';
	color:#888;
	padding:10px;
}
nav{
	position:relative;
	border-radius:5px;
	display:block;
	margin: 30px auto 0;
	width:800px;
	background:#fff;
	border-radius:5px;
	box-shadow: 1px 1px 33px #fff;
	}
.homeIcon{
	position:relative;
	display:block;
	width:50px;
	height:40px;
	}
#home:hover > a .home-top{
	border-bottom:10px #fff solid;
	}	
#home:hover > a .home-top-r{
	background:#fff;
	}
#home:hover > a .home-door-l{
	background:#fff;
	}
#home:hover > a .home-door-r{
	background:#fff;
	}			
.home-top{
	position:absolute;
	left:15px;
	top:0px;
	border-left:10px transparent solid;
	border-right:10px transparent solid;
	border-top:10px transparent solid;
	border-bottom:10px #C2C2C2 solid;
	box-shadow: 0px 1px 0px #000;
	width:0px;
	height:0px;	
	}	
.home-top-r{
	position:absolute;
	left:27px;
	top:13px;
	width:4px;
	height:6px;
	background:#C2C2C2;
	}
.home-door-l{
	position:absolute;
	left:18px;
	top:20px;
	width:5px;
	height:6px;
	background:#C2C2C2;
	}
.home-door-r{
	position:absolute;
	left:27px;
	top:20px;
	width:5px;
	height:6px;
	background:#C2C2C2;
	}			
.fancyNav{
	display:block;
	position:relative;
	border-radius:5px;
	background-image: linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
	background-image: -webkit-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
	background-image: -moz-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
	background-image: -o-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
	background-image: -ms-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);	}
.fancyNav li{
	position:relative;

	height:40px;
	line-height:40px;
	padding:0px 20px;
	display:block;
	float:left;
	border-right:1px #000 solid;
	}
.fancyNav li:hover{
	background:rgba(10, 5, 5, 0.2);
		}	
.fancyNav li ul{
	position:absolute;
	display:none;
	left:0px;
	overflow:hidden;
	}
.fancyNav li:hover>ul{
	display:block;
	animation:animated .5s ease 0s 1 alternate;
	-webkit-animation:animated .5s ease 0s 1 alternate;
	-moz-animation:animated .5s ease 0s 1 alternate;
	-ms-animation:animated .5s ease 0s 1 alternate;	
	-o-animation:animated .5s ease 0s 1 alternate;}
@keyframes animated
	{
	0%		{transform: rotate(0deg);opacity:0;}
	100%	{transform: rotate(-360deg);opacity:1;}
	}
@-webkit-keyframes animated
	{
	0%		{-webkit-transform: rotate(0deg);opacity:0;}
	100%	{-webkit-transform: rotate(-360deg);opacity:1;}
	}
@-moz-keyframes animated
	{
	0%		{-moz-transform: rotate(0deg);opacity:0;}
	100%	{-moz-transform: rotate(-360deg);opacity:1;}
	}
@-o-keyframes animated
	{
	0%		{-o-transform: rotate(0deg);opacity:0;}
	100%	{-o-transform: rotate(-360deg);opacity:1;}
	}
@-ms-keyframes animated
	{
	0%		{-ms-transform: rotate(0deg);opacity:0;}
	100%	{-ms-transform: rotate(-360deg);opacity:1;}
	}
.fancyNav li ul li
{
	display:block;
	margin:0px;
	border-top: 1px solid #989898;
    border-bottom: 1px solid #343434;
	background:rgba(10, 5, 5, 0.45);
	height:30px;
	line-height:30px;
	width:60px;
}	
.fancyNav li ul li:hover{
	background:rgba(10, 5, 5, 0.9);
	}
li a{
	color:#fff;
	text-decoration:none;
    text-shadow: 0px 1px 0px #000
	}
input[type=search] {
-webkit-appearance: none;
outline: none;
}
#searchform {
position: absolute;
right: 10px;
bottom: 6px;
z-index: 100;
width: 160px;
}
#searchform #s {
outline:none;			
width: 80px;
float: right;
background: #fff;
border: none;
padding: 6px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
}
#searchform #s:focus {
width: 150px;
}
footer {
margin-top:400px;	
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}