应用CSS3制做饼状转动加载实际效果的案例

日期:2020-12-12 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

今日,要完成1个长每日任务等候提醒实际效果。

随后设计方案师就把做好的gif实际效果图给我,便是下面这个:

依照大家做法,我应当是把照片立即按图索骥,调调合理布局,随后早早回家了抱老婆。

可是,我这本人,与生俱来躁动不安分守己。想起是用在顾客端,顾客端又是用的webkit核心,因而,立马决策应用CSS3来折腾1番。

外面的光环很好完成,360度转转转就OK. 可是,正中间那个鸡蛋转转转的可并不是好啃的骨头啊。人家师傅饼前1分钟,饼下10年功啊。

我生晚辈要想习得这转饼的精粹,可得好些生揣摩1番啊!

假如您手头的是IE10+这类适用animation的当代访问器,您能够狠狠地址击这里:CSS3饼状图loading转动动漫demo

截图是死的,demo是活的。提议点上面的详细地址去细心比照CSS3完成和gif动漫实际效果。

不难发现,这个gif规格又大,实际效果也不顺畅,还烧特性。相比之下,立马被CSS3完成甩出了2条南京路。

CSS3实际效果更佳、特性更高、資源占有更少大伙儿都认同了。重要是,这个大饼它是如何转起来的?

略繁杂。
蛋饼转动专业技能教给

师父领进门修行在本人,听不懂我也没法啦~~

大家肉眼看上去是1个鸡蛋被摊在了全部饼上,具体上,这只是个障眼法。

具体摊的鸡蛋,仅有半个饼那末大。也有半个饼部位是长得像鸡蛋的假鸡蛋和长得像大饼的假大饼。明显这句话你听不懂,由于我自身都没听懂,哈哈~~所谓1图胜千言,示用意走起~

下图示意的便是鸡蛋饼上的鸡蛋从100%缩小成0的全过程。

1. 这是沒有影响的蛋饼,你看到的是半个假饼和半个假蛋。

2. 当大家煎饼动漫转起的1一瞬间,大家让假的饼子掩藏回家了打酱油去。因而,从上面看,大家看到的便是满满1层的鸡蛋。

3. 真鸡蛋转起,你会发现,半个真鸡蛋,因为逆时针转动,露出了点空(左边上部)。

demo对应实际效果相近(浅色系当做鸡蛋):

4. 认真鸡蛋转动了180度(半圈)的情况下,真伪鸡蛋恰好重叠在了1起,因而便是看到的便是蛋饼上半面鸡蛋。

demo对应实际效果相近:

demo对应实际效果相近:

6. 1直转动到360度,其彻底被假的饼子遮住,1点鸡蛋都看不见了。进行了从所有都0的动漫全过程。这便是蛋饼转转转的基础基本原理。

CSS3表明
可见,要完成大家要想的蛋饼实际效果,大家必须这些物品:

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

CSS Code拷贝內容到剪贴板
  1. <div class="inner">   
  2.     <div class="spiner"></div>   
  3.     <div class="filler"></div>   
  4.     <div class="masker"></div>   
  5. </div>  

    inner关键完成圆和情况色;
    spiner关键完成半圆的360度逆时针转动,其情况色有别于父元素的情况色;
    filler半圆,精准定位在右边,与转动元素一样情况色;后边的180度掩藏;
    masker半圆,精准定位在左边,与大情况色色值同样;转动前180度掩藏,以后显示信息遮住;

在其中,360度转动CSS编码以下:

CSS Code拷贝內容到剪贴板
  1. @keyframes spin {   
  2.   0%   { transform: rotate(360deg); }   
  3.   100% { transform: rotate(0deg); }   
  4. }  

由于是逆时针,因此是从360deg到0deg.

前半程出現,后半程掩藏,能够依靠animation step有关的timing function完成,编码以下:

CSS Code拷贝內容到剪贴板
  1. @keyframes second-half-hide {   
  2.   0%        { opacity: 1; }   
  3.   50%, 100% { opacity: 0; }   
  4. }  

后半程显示信息则是:

CSS Code拷贝內容到剪贴板
  1. @keyframes second-half-show {   
  2.   0%        { opacity: 0; }   
  3.   50%, 100% { opacity: 1; }   
  4. }  

因而,大家要是加个动漫時间,和无尽实行就OK啦~~

CSS Code拷贝內容到剪贴板
  1. .spiner { transform-origin: rightright center; animation: spin .8s infinite linear; }   
  2. .filler { animation: second-half-hide .8s steps(1, end) infinite; }   
  3. .masker { animation: second-half-show .8s steps(1, end) infinite; }  

别的细节全是精准定位甚么的,很基本的专业知识,就不唠叨啦~~

饼实际上都还没做好
啊,捣鼓了这么久都还没完毕啊?

没错。细心查询gif动漫,你会发现,蛋饼它是从全盘都0再到全部360度遮盖的。

而,上午捣鼓的动漫只是从360度无死角遮盖到0遮盖。1旦遮盖完毕,就又要走360度刚开始,不连贯性,如何破?

我是这么解决的:
再遮盖1个蛋饼从0度到360度展现的动漫。与1直捣鼓的动漫前后左右半程各自展现便可以了。

因而,最后有以下HTML:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="inner">  
  2.     <div class="spiner"></div>  
  3.     <div class="filler"></div>  
  4.     <div class="masker"></div>  
  5. </div>  
  6. <div class="inner2">  
  7.     <div class="spiner"></div>  
  8.     <div class="filler"></div>  
  9.     <div class="masker"></div>  
  10. </div>  

inner和inner2也应用的前后左右半程掩藏的动漫,动漫時间恰好是1个周期的2倍。

CSS Code拷贝內容到剪贴板
  1. .inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; }   
  2. .inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }  

因而,就有了完善的做蛋饼实际效果了。