CSS威武!

有一个同学介绍我看了一个网站,看过之后对这个网站的风格表示很喜欢,亮点是其中的图片导航栏。我呆呆的看了5分钟,放出话说这个我也能做。很明显,原站点动用了js来做这样一个动画效果,而我在想应该可以用css来达到同样的效果。于是昨天晚上,我将自己的想法付诸实践。

整个过程似乎比我预想的要顺利,虽然作品出自自己的双手,但还是不得不赞叹新的css所带来的强大功能。在这个小案例当中用到了下面2个关键的属性:

  • :not()。这是一个新的选择器伪类,用来剔除选定集合中的特定内容。为了去掉当前鼠标所在的元素,用到了:not(:hover)这个不可思议的组合。其实我一开始也是抱着试试看的心理来用这样一种组合,没想到效果相当好。这也颠覆了我对伪类的认识。
  • -webkit-transition。这是html5引入的一个新的css属性,当然因为使用chrome和safari浏览器,必须添加-webkit这个前缀。这个属性就我目前的认识,用法是对选定元素指定一个属性,同时指定动画方式。此后,只要触发这个属性的改变就会以预先定义好的动画方式来显示。具体请研究示例里面的代码。

虽然我没有在firefox上测试过,但是如果把webkit改成moz的话应该也会有同样的效果。这算是html5的基本常识了,为了浏览器兼容性,理应把各种属性都加上去。不过作为一个测试页面,请原谅我没有考虑太多的兼容性问题。此外,作为一个果粉+谷粉,请允许我自私一回。想看效果的就请移驾此地。(PS:仅限chrome和safari浏览器哦!)