使用CSS3制作饼状旋转载入效果的实例

今天,要实现一个长任务等待提示效果。

  然后设计师就把做好的gif效果图给我,就是下面这个:

2015623154443151.gif (86×86)

  按照大众做法,我应该是把图片直接按图索骥,调调布局,然后早早回家抱老婆。

  但是,我这个人,天生不安分守己。想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番。

  外面的光环很好实现,360度转转转就OK. 但是,中间那个鸡蛋转转转的可不是好啃的骨头啊。人家师傅饼前一分钟,饼下十年功啊。

  我生小辈想要习得这转饼的精髓,可得要好生琢磨一番啊!

  如果您手头的是IE10+这类支持animation的现代浏览器,您可以狠狠地点击这里:CSS3饼状图loading旋转动画demo

2015623154506455.png (232×310)

  截图是死的,demo是活的。建议点上面的地址去仔细对比CSS3实现和gif动画效果。

  不难发现,这个gif尺寸又大,效果也不流畅,还烧性能。相比之下,立马被CSS3实现甩出了2条南京路。

  CSS3效果更佳、性能更高、资源占用更少大家都认同了。关键是,这

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值