- <!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>
- //该片段来自于http://www.codesnippet.cn/detail/080620133908.html
来源: http://www.codesnippet.cn/detail/080620133908.html