有一个同学介绍我看了一个网站，看过之后对这个网站的风格表示很喜欢，亮点是其中的图片导航栏。我呆呆的看了5分钟，放出话说这个我也能做。很明显，原站点动用了js来做这样一个动画效果，而我在想应该可以用css来达到同样的效果。于是昨天晚上，我将自己的想法付诸实践。
整个过程似乎比我预想的要顺利，虽然作品出自自己的双手，但还是不得不赞叹新的css所带来的强大功能。在这个小案例当中用到了下面2个关键的属性：
- :not()。这是一个新的选择器伪类，用来剔除选定集合中的特定内容。为了去掉当前鼠标所在的元素，用到了:not(:hover)这个不可思议的组合。其实我一开始也是抱着试试看的心理来用这样一种组合，没想到效果相当好。这也颠覆了我对伪类的认识。
- -webkit-transition。这是html5引入的一个新的css属性，当然因为使用chrome和safari浏览器，必须添加-webkit这个前缀。这个属性就我目前的认识，用法是对选定元素指定一个属性，同时指定动画方式。此后，只要触发这个属性的改变就会以预先定义好的动画方式来显示。具体请研究示例里面的代码。
虽然我没有在firefox上测试过，但是如果把webkit改成moz的话应该也会有同样的效果。这算是html5的基本常识了，为了浏览器兼容性，理应把各种属性都加上去。不过作为一个测试页面，请原谅我没有考虑太多的兼容性问题。此外，作为一个果粉+谷粉，请允许我自私一回。想看效果的就请移驾此地。（PS：仅限chrome和safari浏览器哦！）
