css3导航特效之跟随鼠标二

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

今天再来分享一款鼠标跟随效果，如下图：

今天的是在前天的基础上进行变形而已，将细线条转化成了背景，效果也都存在。此次的变形是想告诉亲们：
同一种思路可以演化成许多不同的效果，效果的多少，在于你的想象空间有多大。不废话了，上源码。

<!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;height:35px;position:relative;}
.nav a{float:left;position:relative;z-index:10;display:inline-block;height:35px;line-height:35px;padding:0 20px;}
.nav a:hover{text-shadow:0 1px 2px #fff}
.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{position:absolute;z-index:8;display:block;height:25px;width:28px;left:10px;top:5px;background-color:rgb(255,102,153);border-radius:20px;padding:0 10px;}
a[class="nav_1"]:hover ~.nav_x{left:10px;width:28px;}
a[class="nav_2"]:hover ~.nav_x{left:78px;width:62px;}
a[class="nav_3"]:hover ~.nav_x{left:180px;width:55px;}
a[class="nav_4"]:hover ~.nav_x{left:275px;width:61px;}
a[class="nav_5"]:hover ~.nav_x{left:376px;width:66px;}
a[class="nav_6"]:hover ~.nav_x{left:482px;width:67px;}
a[class="nav_7"]:hover ~.nav_x{left:590px;width:56px;}
a[class="nav_8"]:hover ~.nav_x{left:684px;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>
</div>
</body>
</html>

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

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