CSS威武!

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

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

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

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

ni_hy

国内某理工学校(?)医学专业85后。爱好广泛,从电影、音乐、旅游、小说、美剧,到哲学、神学、医学、数学、物理学,再到电脑、手机、网络、应用、写代码,均有不同程度涉猎。经常关注Apple, Google, 以及各种IT资讯。平时喜欢研究和折腾。本来跟鱼尾童鞋彼此独立建站,现受其诚邀与其合作,力争使得工坊逐渐具有更大的读者群。

More Posts

2 Responses

  • 这个东西确实很神奇啊,从来没见过这样的伪类,今后选择元素应该会方便许多吧。
    原来的做法是不带伪类后缀再定义一遍,不知道有没有什么区别。
    transition属性看来是空前的强大,有空能不能列张表看看。

    • 没见过可能是因为过去没有带参数的伪类,现在有了很多,比如:nth-child(),可以在子元素集合中选择奇数项或偶数项,甚至可以选择被3除余1的项,等等。
      我一开始就是用的你说的传统做法,但是根本无法实现,如果你有什么想法,可以自己做做看,说不定可以做出更精妙的来,期待你的杰作。

Leave a Reply