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

2019-09-10 郑州网站建设  

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

然后设计师就把做好的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效果更佳、性能更高、资源占用更少大家都认同了。关键是,这个大饼它是如何转起来的?

略复杂。
蛋饼旋转技能传授

师父领进门修行在个人,听不懂我也没方案啦~~

我们肉眼看上去是一个鸡蛋被摊在了整个饼上,实际上,这只是个障眼法。

实际摊的鸡蛋,只有半个饼那么大。还有半个饼位置是长得像鸡蛋的假鸡蛋和长得像大饼的假大饼。显然这句话你听不懂,因为我自己都没听懂,哈哈~~所谓一图胜千言,示意图走起~

下图示意的就是鸡蛋饼上的鸡蛋从100%变小成0的过程。

1. 这是没有干扰的蛋饼,你看到的是半个假饼和半个假蛋。

2015623154531334.png (454×340)

2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

2015623154552781.png (454×340)

3. 真鸡蛋转起,你会发现,半个真鸡蛋,由于逆时针旋转,露出了点空(左侧上部)。

2015623154614997.png (454×340)

demo对应效果类似(浅色看成鸡蛋):

2015623154630843.png (454×340)

4. 当真鸡蛋旋转了180度(半圈)的时候,真假鸡蛋正好重合在了一起,于是就是看到的就是蛋饼上半面鸡蛋。

2015623154649674.png (70×67)

demo对应效果类似:

2015623154708939.png (454×340)

demo对应效果类似:

2015623154724898.png (69×65)

6. 一直旋转到360度,其完全被假的饼子遮盖,一点鸡蛋都看不到了。完成了从全部都0的动画过程。这就是蛋饼转转转的基本原理。

2015623154742376.png (454×340)

CSS3表示
可见,要实现我们想要的蛋饼效果,我们需要这些东西:

圆形的蛋饼子 – 对应下面类名为inner元素
    旋转的半面真鸡蛋 – 对应下面类名为spiner的元素
    不动的半面蛋饼子,前半程隐藏,后半程出现 – 对应下面类名为masker的元素
    不动的半面假鸡蛋,前半程出现,后半程隐藏 – 对应下面类名为filler的元素

CSS Code复制内容到剪贴板

<div class="inner">   

    <div class="spiner"></div>   

    <div class="filler"></div>   

    <div class="masker"></div>   

</div>  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1746.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • Ч
  • 任务
  • 今天
  • 实现
  • 一个
  • 等待