今天浏览网页，看到个很不错的效果(本人不会配色，估计色彩搭配好点效果更佳)，想了想，就把它彷过来了。虽然现在IE对CSS3特效的支持是个很纠结的事情，但是我们更应该看到CSS3在一些高级浏览器中的突出表现，所以让我们忍受IE生硬的同时，感受高级浏览器的平滑。
效果预览：http://www.huiyi8.com/css3/
效果预览：http://www.huiyi8.com/css3/
<!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>