例牌的唠叨

想当年哇，刚写编程的时候，做页面想用些绚丽的效果，可那个时候不会js，才刚学java，哪那么快搞股这么多东西呢。无奈只好google搜（当年google这愣头青还才跑进中国呢），找了一大堆，不是运行出错就是只支持ie，真是坑爹啊~~

当年菜单特效很流行，好像没有动画就不能进菜单家门了。在google N久之后，我也终于找到一个滑动背景效果的代码。不懂原理，也用得不亦乐乎。

以上都是废话

嗯，以上都是废话 :oops:。最近偶然看到以前做的滑动背景菜单，看了下代码，都快笑喷了 -- 天啊，我竟然写过这么挫的代码! 所谓滑动背景菜单，就是鼠标移上去，会有一个气泡什么的垫在菜单下面的，可以看看下面这个 live demo。

这个是用jq做的，当然不是我写的，出处在这里。如果一个效果/动画能用css3实现，我是绝对不想用js搞的。more

以上还是废话

好，现在我们来用css3做这个效果。今天的主角是nth-child选择器和 ~ 选择器，以及transition来打下龙套。简单介绍下：

1. :nth-child(n) 选择某个元素的一个或多个特定的子元素，n表示第几个。例如 p span:nth-child(1)，选中p下面的第一个span，n是从1开始的，这很怪，猜是 w3c 的家伙集体打瞌睡了。n 也可以是表达式，如 2n 表示选择所有偶数个，等于even；2n+1 表示选择基数个，等于 odd；3n表示选择顺序是 3的倍数的子元素等等；
2. ~ 兄弟选择器，选择跟在某个元素后面的特定兄弟元素，例如 p ~ div选中跟p同级，且在p后面的div；
3. + 临近兄弟选择器，是 ~ 的特例，选择紧跟在某个元素后面的一个特定兄弟元素，p + div则只选中贴着p的屁股的第一个div。本文这里用不上，说的太欢，一下子没收住...

背景的定位

这个效果的动画其实很简单，把transition-property设成left，改动left的值就能产生动画了。关键的left的位置怎么算？ 卖个关子，先看代码。

<ul class="clearfix">
    <li><a href="javascript: void(0);">Home</a></li>
    <li><a href="javascript: void(0);">About</a></li>
    <li><a href="javascript: void(0);">Category</a></li>
    <li><a href="javascript: void(0);">Blog</a></li>
    <li><a href="javascript: void(0);">Picture</a></li>
    <li class="bubble"></li>
</ul>

ul{  position: relative; }
li{
    float: left;
    margin: 10px;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}
li.bubble{
    background: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
}
li:nth-child(1):hover ~ .bubble{  left: 0px; }
li:nth-child(2):hover ~ .bubble{  left: 100px; }
li:nth-child(3):hover ~ .bubble{  left: 200px; }
li:nth-child(4):hover ~ .bubble{  left: 300px; }
li:nth-child(5):hover ~ .bubble{  left: 400px; }

你看懂了没，滑动的背景用最后一个li实现，在鼠标移到第某个li上面的时候，就设置跟在其后面的bubble节点的left为 为相应的值。

举例来说, li:nth-child(2):hover ~ .bubble{ left: 100px; } 就是在鼠标移到第二个li的时候，设置背景的left为100px，而每个li的宽度加上margin刚好100px宽度，因此定位到了第二个菜单项下面。

你可以点这里查看demo。在chrome中以本地文件的方式打开demo页时，对hover跟~一起用的情况处理有bug。如果一开始就把鼠标移到第二个以后的菜单项，背景的定位就会不准确。除非先把鼠标移到第一个或第二个菜单项，之后表现就完全正常了。不过这东西都是网站上用的，没有人放在本地运行吧？

局限

细心的人可能也发现了，就是这里的菜单项都是等宽的，以及定位都是预先写好的，有多少个菜单项就要写多少个定位。对此我也很无奈 -- 目前的css还不支持动态计算诶。css3唯一一个计算的属性 cal （哦，忘了还有min和max），却也不适应这种情况。所以如果想做成能动态添加菜单的，只能加点js了（呜呜呜，不能全用css实现，伦家好桑心~~ :cry:）。

既然都用了js，那么宽度和定位都不是虾米问题，而且即使用了js，这个方法仍然是一级棒的，^_^，因为呀，你只要添加的时候算好，以后都不用算了呀 :cool: ~~~哗啦啦~~~万岁~~~