CSS3超级大转盘

众所周知,现在各大主流网站上都或多或少地应用了CSS3动画效果,因为CSS3的动画效果所消耗的资源要比js动画效果消耗的资源要小很多,在我看来,CSS3的前景非常光明,所以今天我将模仿firfox首页的一个效果,带大家领略一下CSS3的强大之处。

CSS3超级大转盘

实现的效果:
          1.点击旋转时,转盘旋转到下一个板块。文字弹出框将下移并消失,然后再弹出。
          2.转盘上板块的文字,是通过css定位上去的,并不是与转盘一体的图片。
 
思路:
          1.每点击一次旋转,转盘通过css的transform的rotate(deg)方法旋转120度。
          2.再次使用transform将板块上的文字通过旋转角度定位上去。
          3.通过jquery的animate方法控制文字弹出框的弹入弹出。
 
这是一个比较简单的demo,大家通过我提供的思路去看源码,我想会一目了然的,我也无需多言了。
 

相关推荐