CSS3超级大转盘

6 篇文章 0 订阅
4 篇文章 0 订阅

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

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值