css3导航特效之跟随鼠标一

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-12-29 17:44:05　-　阅:　-　评:0　-　积分:0

好久没有在这版块更新文章了，昨天调休，睡着也没事干，于是忍着寒冷又写了一个导航特效。什么样的效果呢？如下图：

怎么样，看着这布局是不是有点熟悉呢？没错，就是百度新闻页的导航条，只是洒家增加了滑过时跟随的效果而已。
效果分析：鼠标滑过时，下面的细线条跟随位置变化，并且长度会随着对应区域的长短而发生变化。听着是不是感觉很神秘呢？也说此时你会想：要是用jq来实现的话还得需要获取位置以及对应的长度，仅用css3就能实现？这也太不科学了吧！附源码。

<!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导航特效之跟随鼠标一---艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="css3导航特效,跟随鼠标,鼠标滑过特效,过渡属性,弹性动画">
<meta name="description" content="css3导航特效,跟随鼠标,鼠标滑过特效,过渡属性,弹性动画">
<style type="text/css">
*{margin:0;padding:0}
body{font-size:14px; font-family:Arial, Helvetica, sans-serif,"宋体"}
.clearfix:before, .clearfix:after {display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
a{text-decoration:none;color:rgb(85, 26, 139)}
/*复制样式开始*/
.nav{width:900px;margin:0 auto;position:relative;}
.nav a{float:left;display:inline-block;height:35px;line-height:35px;padding:0 20px;}
.nav a:hover{text-shadow:0 0 2px #ccc}
.nav a,.nav_x{-moz-transition: .4s ease-out;-webkit-transition: .4s ease-out;-o-transition: .4s ease-out;-ms-transition: .4s ease-out;transition: .4s ease-out;}
.nav_x,.nav_x_bg{z-index:9;position:absolute;display:block;height:3px;line-height:3px;overflow:hidden;width:28px;left:20px;bottom:0;background-color:rgb(255,102,153);}
.nav_x_bg{z-index:8;width:825px;left:20px;bottom:0;background-color:rgb(204,204,204);z-index:8;}
a[class="nav_1"]:hover ~.nav_x{left:20px;width:28px;}
a[class="nav_2"]:hover ~.nav_x{left:88px;width:62px;}
a[class="nav_3"]:hover ~.nav_x{left:190px;width:55px;}
a[class="nav_4"]:hover ~.nav_x{left:285px;width:61px;}
a[class="nav_5"]:hover ~.nav_x{left:386px;width:66px;}
a[class="nav_6"]:hover ~.nav_x{left:492px;width:67px;}
a[class="nav_7"]:hover ~.nav_x{left:599px;width:56px;}
a[class="nav_8"]:hover ~.nav_x{left:694px;width:151px;}
/*复制样式结束*/
</style>
</head>
<body>
<div class="nav clearfix">
<a href="http://www.yilingsj.com/flash/" class="nav_1">首页</a>
<a href="http://www.yilingsj.com/flash/" class="nav_2">flash 动画</a>
<a href="http://www.yilingsj.com/div/" class="nav_3">div + css</a>
<a href="http://www.yilingsj.com/css3/" class="nav_4">css3 特效</a>
<a href="http://www.yilingsj.com/html5/" class="nav_5">html5 实例</a>
<a href="http://www.yilingsj.com/jquery/" class="nav_6">jquery特效</a>
<a href="http://www.yilingsj.com/code/" class="nav_7">懒人代码</a>
<a href="http://www.yilingsj.com/ziyuan/" class="nav_8">长度还会变化，Really？</a>
<span class="nav_x"></span>
<span class="nav_x_bg"></span>
</div>
</body>
</html>

点击上面的“运行代码”后会看到预览的效果，怎么样，是不是实现了跟随与长度发生变化。再来看看源码，不同的长度提前设置好就可以了。当然，这种方法仅限于少量的内容，内容过多时显得特别麻烦，那时就需要用jq了。当然导航的长度有限，此方法还是可以以假乱真的。

其实，很多时候我们都被表面现象所迷惑。一看到效果好看点的，刚想操作就感觉到无从下手，于是就安慰自己，什么什么的。洒家想说的是：不去尝试永远不知道结果会如何，尝试下又不会怀孕。就算真的怀上了，大不了生下来呗！

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

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