您现在的位置是:电脑技术吧 >  组装维修   >  饼状岩芯,柱状饼图  >  正文详情

饼状岩芯,柱状饼图

随天蓝2019-11-22 15:21:41 人围观
简介如何做饼状统计图今天,我们想达到一个长任务等待的提示效果,设计师给了我一个GIF效果图,内容如下:根据公众的实践,我应该直接按照图片,调整布局,然后早点回家娶个老婆,

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

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

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

  但是,我这个人,天生不安分守己。

想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番。

  外面的光环很好实现,360度转转转就OK. 但是,中间那个鸡蛋转转转的可不是好啃的骨头啊。

人家师傅饼前一分钟,饼下十年功啊。

  我生小辈想要习得这转饼的精髓,可得要好生琢磨一番啊!  如果您手头的是IE10 这类支持animation的现代浏览器,您可以狠狠地点击这里:CSS3饼状图loading旋转动画demo

  截图是死的,demo是活的。

建议点上面的地址去仔细对比CSS3实现和gif动画效果。

  不难发现,这个gif尺寸又大,效果也不流畅,还烧性能。

相比之下,立马被CSS3实现甩出了2条南京路。

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

关键是,这个大饼它是怎么转起来的?  略复杂。

  蛋饼旋转技能传授  师父领进门修行在个人,听不懂我也没办法啦~~  我们肉眼看上去是一个鸡蛋被摊在了整个饼上,实际上,这只是个障眼法。

  实际摊的鸡蛋,只有半个饼那么大。

还有半个饼位置是长得像鸡蛋的假鸡蛋和长得像大饼的假大饼。

显然这句话你听不懂,因为我自己都没听懂,哈哈~~所谓一图胜千言,示意图走起~  下图示意的就是鸡蛋饼上的鸡蛋从100%变小成0的过程。

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

  2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。

于是,从上面看,我们看到的就是满满一层的鸡蛋。

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

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

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

  demo对应效果类似:

  demo对应效果类似:

  6. 一直旋转到360度,其完全被假的饼子遮盖,一点鸡蛋都看不到了。

完成了从全部都0的动画过程。

这就是蛋饼转转转的基本原理。

  CSS3表示  可见,要实现我们想要的蛋饼效果,我们需要这些东西:  圆形的蛋饼子 对应下面类名为inner元素  旋转的半面真鸡蛋 对应下面类名为spiner的元素  不动的半面蛋饼子,前半程隐藏,后半程出现 对应下面类名为masker的元素  不动的半面假鸡蛋,前半程出现,后半程隐藏 对应下面类名为filler的元素 CSS Code复制内容到剪贴板

    div class=inner div class=spiner/div div class=filler/div div class=masker/div /div
  inner主要实现圆以及背景色;  spiner主要实现半圆的360度逆时针旋转,其背景色有别于父元素的背景色;  filler半圆,定位在右侧,与旋转元素同样背景色;后面的180度隐藏;  masker半圆,定位在左侧,与大背景色色值相同;旋转前180度隐藏,之后显示遮盖;  其中,360度旋转CSS代码如下:  CSS Code复制内容到剪贴板
    @keyframes spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
  因为是逆时针,所以是从360deg到0deg.  前半程出现,后半程隐藏,可以借助animation step相关的timing function实现,代码如下:  CSS Code复制内容到剪贴板
    @keyframes second-half-hide { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
后半程显示则是: CSS Code复制内容到剪贴板
    @keyframes second-half-show { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
于是,我们只要加个动画时间,以及无限执行就OK啦~~ CSS Code复制内容到剪贴板
    .spiner { transform-origin: rightright center; animation: spin .8s infinite linear; } .filler { animation: second-half-hide .8s steps(1, end) infinite; } .masker { animation: second-half-show .8s steps(1, end) infinite; }
  其他细节都是定位什么的,很基础的知识,就不?嗦啦~~  饼其实还没有做好  啊,捣鼓了这么久还没有结束啊?  没错。

仔细查看gif动画,你会发现,蛋饼它是从全盘都0再到整个360度覆盖的。

  而,上午捣鼓的动画只是从360度无死角覆盖到0覆盖。

一旦覆盖结束,就又要走360度开始,不连贯,怎么破?  我是这么处理的:  再覆盖一个蛋饼从0度到360度展示的动画。

与一直捣鼓的动画前后半程分别展示就可以了。

  于是,最终有如下HTML:  XML/HTML Code复制内容到剪贴板

    div class=inner div class=spiner/div div class=filler/div div class=masker/div /div div class=inner2 div class=spiner/div div class=filler/div div class=masker/div /div
inner和inner2也使用的前后半程隐藏的动画,动画时间正好是一个周期的2倍。

CSS Code复制内容到剪贴板

    .inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; } .inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }
于是,就有了完美的做蛋饼效果了。

版权声明:本文由 随天蓝 整理编辑。

原标题:饼状统计图,饼状

转载注明出处:http://www.manhua123.cn/assemble/13957.html

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

作者推荐

  • pdf怎么转文档格式,docx怎么转换jpg

    pdf怎么转文档格式,docx怎么转换jpg 相关图片pdf改为docx我相信大多数小伙伴使用PDF转换器转换成word后,文件扩展名就是。医生?所以最近,许多小伙伴来问小编辑如何将PDF转换成docx格式。现在,超人软件编辑将介绍手机pdf怎么转...

  • 鼠标设置,电脑鼠标没反应怎么办

    鼠标设置,电脑鼠标没反应怎么办 相关图片鼠标点了电脑没反应首先,让我们看看这个例子的效果。如果鼠标在场景中的不同位置被刷过,场景中的恶棍会有不同的反应。特别有趣的是,当鼠标穿越的速度不同时,反应的强度也...

  • 带命令行的安全模式,命令提示符进入安全模式

    带命令行的安全模式,命令提示符进入安全模式 相关图片windows安全模式Bat命令可以帮助用户在win10系统中快速进入安全模式。win10如何使用bat命令行进入安全模式?下一步,超人软件编辑将介绍win10系统的bat命令,赶快win7安全模式怎么进...

  • 网页设计要注意什么,网页设计需要什么

    网页设计要注意什么,网页设计需要什么 相关图片网页设计注意要点一。记住:你能控制的时间是有限的。我只能在4秒钟内浏览普通网页,所以你没有足够的时间吸引用户并让他们继续浏览你的网站。也就是说,你应该尽可能准确地描...

  • 打开软件假死,页面假死

    打开软件假死,页面假死 相关图片应用程序假死最近,许多小伙伴报告说,当他们的win7系统计算机打开文件夹时,他们总是装死。那么win7打开的文件夹的伪死呢?接下来,超人软件将为您带来一个解决方案,解决wi一打...

  • 派派猪理财怎么样,派派猪官网

    派派猪理财怎么样,派派猪官网 相关图片派派靠谱吗怎么样现在支付宝的收入越来越低,人们开始关注其他金融产品。他们中的一些人选择了一种叫做馅饼的金融产品。派猪可靠吗?让我们与广州下属超人软件站编辑派猪一起...

  • 代码示例文字英文,楔形文字

    代码示例文字英文,楔形文字 相关图片文爱示例文本隐慾效果说明:鼠标放在文本上,文本样式会发生变化,如无下划线、文本会闪烁等,结合其他样式属性,也可以实现按钮式文本链接,效果如图所示具体操作步骤:步骤...

  • 派派是不是微信好友,派派新版本怎么删通讯录好友

    派派是不是微信好友,派派新版本怎么删通讯录好友 相关图片有对方微信号怎么整人拍拍是一种植根于熟人的聊天和社交软件。最近,在我的青春年华里,派派再一次受到关注。那么馅饼是如何欺骗朋友的呢?现在,超人软件编辑将为大家介绍一...

  • 中外广告差别,什么是好广告

    中外广告差别,什么是好广告 相关图片哪个国家的广告好在网络传播领域,我一直在探索与用户更好的沟通和信息传递!在解释H5广告与传统广告的区别的同时,笔者尝试用一幅图片来概括一种内容,让看护者在形式看似简单...

  • 硬盘装系统,固态硬盘安装系统

    硬盘装系统,固态硬盘安装系统 相关图片新硬盘怎么装系统最近,很多追求个性的小伙伴反映,他们很想知道如何设置win7硬盘的背景。然后,超人软件将为您介绍win7系统硬盘后台的设置方法。请不要错过它1。弗斯特系统迁移...

热评文章

  • 南方航空什么座位最好,南方航空未开放选座

    南方航空什么座位最好,南方航空未开放选座 相关图片东航73h最佳座位南航应用程序是南航正式推出的旅游软件。通过这个软件,用户可以在线选择座位。那么,南航如何选择座位呢?现在,超人软件编辑想介绍中国南方航空公司的iPhone版...

  • 什么是数据库索引,数据库索引怎么用

    什么是数据库索引,数据库索引怎么用 相关图片SQL数据库介绍了indexeddb是一个HTML5 web数据库,它允许html5web应用程序在用户浏览器中存储数据。Indexeddb非常强大,对应用程序非常有用。它数据库...

  • 月轮加速器,月轮加速器怎么样

    月轮加速器,月轮加速器怎么样 相关图片好用的加速器月轮加速器以其自由、良好的减阻效果受到众多用户的青睐。但也有用户发现,月轮加速器在使用过程中的加速效果因人而异,也有合作伙伴发现月轮加速器的加速效果并...

  • txt格式怎么转换,txt格式转换

    txt格式怎么转换,txt格式转换 相关图片TXT转换Excel相信大家在日常工作和学习生活中都会遇到需要将PDF格式转换成TXT或word格式的情况。如何将PDF转换成TXT?如何将PDF转换为word?接下来,让超人软件小说格式转换器...

  • 信件背景,背景

    信件背景,背景 相关图片纯色背景一。焰火创建了一个新文件,白色绘图板,形成一个矩形,并用eef8e0填充它。这是照片。2。用滤镜效果眼糖4000填充矩形——如图3所示抖动。为矩形添加内部照明效信笺壁纸...

  • 安全守护电话手表怎样调时间,安全守护手表使用方法

    安全守护电话手表怎样调时间,安全守护手表使用方法 相关图片安全守护2如何调时间安全手表是一种可以直接在手机上管理手表的软件。通过该软件,您可以接收到位置信息,以确保儿童的安全。那么如何使用安全手表呢?保安值班时间怎么定?现...

  • 什么是网页安全色,安全色

    什么是网页安全色,安全色 相关图片安全色为什么颜色虽然大多数现代计算机支持256色(8位),但网页上只有216色是通用的。即使现在一般支持16位和32位计算机,10%的计算机颜色限制为256色。上面的图片是网页web安全色种...

  • Word转换成PPT,word转换成ppt的方法

    Word转换成PPT,word转换成ppt的方法 相关图片2010版ppt转换成word相信在实际办公过程中,您已经满足了将ppt转换成word或PDF的需要。那么如何将ppt转换成word呢?现在,超人软件编辑想介绍如何将ppt转换成PDF,word怎么变成ppt格式...

  • 魔兽世界军团再临app,魔兽世界 军团助手

    魔兽世界军团再临app,魔兽世界 军团助手 相关图片魔兽世界旧版军团助手作为《魔兽世界》的官方游戏助理,《魔兽世界》陆军便携式应用程序被《魔兽世界》的所有玩家和好友使用。那么,魔兽世界陆军的便携式应用程序一直连接在...

  • 色的成语,色和

    色的成语,色和 相关图片相近色 对比色 互补色一。暖色暖色主要由红、橙、黄等红色色调组成。暖色给人温暖、舒适、动感的感觉,在网页设计中可以突出视觉效果。在网页中使用类似颜色时,请注意色块的大...

关注微信