很炫的CSS3导航效果会动的

　2012-05-17 19:55:30　来源：WEB开发网　　　

核心提示： 看到个很不错的效果(本人不会配色，估计色彩搭配好点效果更佳)，很炫的CSS3导航效果会动的，想了想，就把它彷过来了，虽然现在IE对CSS3的支持是个很纠结的事情，但是我们更应该看到CSS3在一些高级浏览器中的突出表现

看到个很不错的效果(本人不会配色，估计色彩搭配好点效果更佳)，想了想，就把它彷过来了。虽然现在IE对CSS3的支持是个很纠结的事情，但是我们更应该看到CSS3在一些高级浏览器中的突出表现，所以让我们忍受IE生硬的同时，感受高级浏览器的平滑。

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>很炫的导航</title>
<style>
.nav{
	margin:0 auto;
	width:800px;
	height:200px;
}
.nav .links{
	float:left;
	position:relative;
	width:200px;
	height:200px;
	overflow:hidden;
	-moz-transition:background-color .3s ease-in-out;
	-webkit-transition:background-color .3s ease-in-out;
	-o-transition:background-color .3s ease-in-out;
	-ms-transition:background-color .3s ease-in-out;
	transition:background-color .3s ease-in-out;
}
.nav .links1{background-color:#949494;}
.nav .links2{background-color:#a4a4a4;}
.nav .links3{background-color:#b4b4b4;}
.nav .links4{background-color:#c4c4c4;}
.nav .links .bg{
	position:absolute;
	top:-200px;
	width:200px;
	height:200px;
	opacity:0;
	filter:Alpha(opacity=0);
	background:url(imgs/img_01.png) no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/img_01.png',sizingMethod='crop');
	-moz-transition:top .3s ease-in-out,opacity .5s ease-in-out;
	-webkit-transition:top .3s ease-in-out,opacity .5s ease-in-out;
	-o-transition:top .3s ease-in-out,opacity .5s ease-in-out;
	-ms-transition:top .3s ease-in-out,opacity .5s ease-in-out;
	transition:top .3s ease-in-out,opacity .5s ease-in-out;
}
.nav .links .intro{
	position:absolute;
	left:0;
	top:50%;
	margin-top:-24px;
	width:100%;
	line-height:48px;
	font:48px/1 Tahoma,Impact,Arial;
	color:#fff;
	text-align:center;
	-moz-transition:top .3s ease-in-out,color .3s ease-in-out;
	-webkit-transition:top .3s ease-in-out,color .3s ease-in-out;
	-o-transition:top .3s ease-in-out,color .3s ease-in-out;
	-ms-transition:top .3s ease-in-out,color .3s ease-in-out;
	transition:top .3s ease-in-out,color .3s ease-in-out;
}
.nav .links:hover{background-color:#383838;}
.nav .links:hover .bg{top:-100px;opacity:0.8;filter:Alpha(opacity=80);}
.nav .links:hover .intro{top:70%;color:#f66;}
</style>
</head>
<body>
<div class="nav">
	<a href="#" target="_blank" class="links links1">
    	<span class="intro">Index</span>
    	<span class="bg"></span>
    </a>
    <a href="#" target="_blank" class="links links2">
    	<span class="intro">Article</span>
    	<span class="bg"></span>
    </a>
    <a href="#" target="_blank" class="links links3">
    	<span class="intro">Photos</span>
    	<span class="bg"></span>
    </a>
    <a href="#" target="_blank" class="links links4">
    	<span class="intro">Contact</span>
    	<span class="bg"></span>
    </a>
</div>
</body>
</html>