CSS3超级大转盘

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

 

 

实现的效果：

          1.点击旋转时，转盘旋转到下一个板块。文字弹出框将下移并消失，然后再弹出。

          2.转盘上板块的文字，是通过css定位上去的，并不是与转盘一体的图片。

 

思路：

          1.每点击一次旋转，转盘通过css的transform的rotate(deg)方法旋转120度。

          2.再次使用transform将板块上的文字通过旋转角度定位上去。

          3.通过jquery的animate方法控制文字弹出框的弹入弹出。

 

这是一个比较简单的demo，大家通过我提供的思路去看源码，我想会一目了然的，我也无需多言了。

 

代码下载地址：https://github.com/yeahzan/dial.git

文章地址：http://www.yeahzan.com/blog/item/css3.html