很炫的CSS3导航效果（会动的哦^_^）-Web网络开发 - 黑苹果论坛|macOS|Mac驱动|黑苹果驱动|Mac软件|黑苹果系统下载|麦创网-iMac.vip

本版
用户

注册登录 | 官方微博繁體版

快捷导航

麦创网»苹果社区 › 多媒体开发 › Web网络开发 › 很炫的CSS3导航效果（会动的哦^_^）

返回列表

MemacX

发消息

发表于 13/8/30 09:34:21 |显示全部楼层

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

本帖最后由 MemacX 于 2013-8-30 09:35 编辑

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

效果预览： http://www.seejs.com/demos/fashion-nav/

<!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>