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


Posted in HTML / CSS onJune 23, 2015

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

然后设计师就把做好的gif效果图给我,就是下面这个:
使用CSS3制作饼状旋转载入效果的实例

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

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

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

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

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

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

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

CSS3效果更佳、性能更高、资源占用更少大家都认同了。关键是,这个大饼它是怎么转起来的?

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

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

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

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

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

1. 这是没有干扰的蛋饼,你看到的是半个假饼和半个假蛋。
使用CSS3制作饼状旋转载入效果的实例

2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。
使用CSS3制作饼状旋转载入效果的实例

3. 真鸡蛋转起,你会发现,半个真鸡蛋,由于逆时针旋转,露出了点空(左侧上部)。
使用CSS3制作饼状旋转载入效果的实例

demo对应效果类似(浅色看成鸡蛋):
使用CSS3制作饼状旋转载入效果的实例

4. 当真鸡蛋旋转了180度(半圈)的时候,真假鸡蛋正好重合在了一起,于是就是看到的就是蛋饼上半面鸡蛋。
使用CSS3制作饼状旋转载入效果的实例

demo对应效果类似:
使用CSS3制作饼状旋转载入效果的实例

demo对应效果类似:
使用CSS3制作饼状旋转载入效果的实例

6. 一直旋转到360度,其完全被假的饼子遮盖,一点鸡蛋都看不到了。完成了从全部都0的动画过程。这就是蛋饼转转转的基本原理。
使用CSS3制作饼状旋转载入效果的实例

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覆盖。一旦覆盖结束,就又要走360度开始,不连贯,怎么破?

我是这么处理的:
再覆盖一个蛋饼从0度到360度展示的动画。与一直捣鼓的动画前后半程分别展示就可以了。

于是,最终有如下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也使用的前后半程隐藏的动画,动画时间正好是一个周期的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; }  

于是,就有了完美的做蛋饼效果了。

HTML / CSS 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 #HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 #HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 #HTML / CSS
You might like
一个简洁的多级别论坛
2006/10/09 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python制作CSDN免积分下载器
2015/03/10 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python网络编程详解
2017/10/31 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
司机的工作范围及职责
2013/11/13 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
高考备战决心书
2014/03/11 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
微笑服务标语
2014/06/24 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书