css3之transition实现有立体感的导航

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-02 16:10:41　-　阅:　-　评:1　-　积分:0

国庆人家都放假了，我还要苦逼的在公司加班，呜呜。好无聊，来写篇文章发表下，打发这下午无聊的时间。

导航特效有很多种，在以前好看的导航特效都是要靠js，jq之类的来实现，用纯css实现的导航效果很死板。当css3出现后，这一切都被改变了，css3里面的transition以及animation0可以轻松的实现以往的js，jq做的特效,接下来就献上一款高端洋气上档次的具有立体感的导航条特效，希望读者朋友喜欢。放张效果图：

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3之transition实现有立体感的导航--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="导航特效,css3导航,立体感导航,超酷导航,transition">
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
body{ font-size:12px;}
.clear{ clear:both;font-size:0;line-height:0;overflow:hidden;}
.top{width:100%;height:30px;background:url(/d/file/css3/2013-10-02/nav_bg.jpg) repeat-x;overflow:hidden;}
.nav{margin:0 auto;height:30px; width:990px; text-align:center}
.nav li{float:left;height:60px;top:0; width:12.5%;position:relative;-webkit-transition:top .2s ease-out;
-moz-transition:top .2s ease-out;-o-transition:top .2s ease-out;-ms-transition:top .2s ease-out;
transition:top .2s ease-out;}
.nav li span,.nav li a{display:block;height:30px;line-height:30px; cursor:pointer;}
.nav li a{background:#495071;color:#fff; border-right:1px solid #727791; padding-right:1px;}
.nav li a,.nav li a:hover{text-decoration:none;}
.nav li:hover{top:-30px;}
</style>
</head>
<body>
<div class="top">
<ul class="nav">
<li><span>艺灵首页</span><a href="/">艺灵首页</a></li>
<li><span>flash动画</span><a href="/flash/">flash动画</a></li>
<li><span>div + css</span><a href="/div/">div + css</a></li>
<li><span>css3特效</span><a href="/css3/">css3特效</a></li>
<li><span>html5特效</span><a href="/html5/">html5特效</a></li>
<li><span>jquery特效</span><a href="/jquery/">jquery特效</a></li>
<li><span>懒人代码</span><a href="/code/">懒人代码</a></li>
<li><span>资源下载</span><a href="/ziyuan/">资源下载</a></li>
<div class="clear"></div>
</ul>
</div>
</body>
</html>

点此下载→→【代码】css3之transition实现有立体感的导航.zip　

怎么样，是不是比普通的滑过效果要好看些，普通的滑过直接显示出来，很呆板，而这里却带有过程，不错吧。建议读者使用非ie内核浏览器进行浏览。

下面我们来做下简单的分析：我们可以看到当鼠标滑过时，文字从下方滚动到上方，稍带立体感，(若想让立体感更强烈，读者可以自己在ps里面处理好背景图片。)这样一来就会用到位置变化，那么这里就是“top”了。还有一个是过渡转变，也就是transition。好了，上述效果分析完毕，小伙伴们快动手尝试下吧。导航特效已应用到网站过列表页的文章标题中。

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。请在非ie内核浏览器下进行浏览，推荐chrome浏览器

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2013-10-02/82.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！