首页 > 代码库 > 很炫的CSS3导航效果（会动的哦^_^）

很炫的CSS3导航效果（会动的哦^_^）

2024-08-04 08:52:18   222人阅读

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

效果预览：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=http://www.mamicode.com/‘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=http://www.mamicode.com/"#" target="_blank" class="links links1">
        <span class="intro">Index</span>
        <span class="bg"></span>
    </a>
    <a href=http://www.mamicode.com/"#" target="_blank" class="links links2">
        <span class="intro">Article</span>
        <span class="bg"></span>
    </a>
    <a href=http://www.mamicode.com/"#" target="_blank" class="links links3">
        <span class="intro">Photos</span>
        <span class="bg"></span>
    </a>
    <a href=http://www.mamicode.com/"#" target="_blank" class="links links4">
        <span class="intro">Contact</span>
        <span class="bg"></span>
    </a>
</div>
</body>
</html>

很炫的CSS3导航效果（会动的哦^_^）


联系
我们