首页
登录 | 注册

css3实现饼状图进度及环形进度条


1
<!-- 饼图 --> 2 <div class="pie"></div> 3 4 <hr /> 5 6 <!-- 环形图 --> 7 <div class="ring"> 8 <div class="child-ring"></div> 9 <div class="left"> 10 <div class="left-c"></div> 11 </div> 12 <div class="right"> 13 <div class="right-c"></div> 14 </div> 15 </div> 1
/* 饼图进度样式开始 */
  2             .pie {
  3                 width: 100px;
  4                 height: 100px;
  5                 border-radius: 50%;
  6                 background: #1D7DB1;
  7                 background-image: linear-gradient(to right, transparent 50%, #9ACD32 0);
  8 
  9                 /* 线性渐变 */
 10                 /* background: linear-gradient(direction, color-stop1, color-stop2, ...); */
 11 
 12                 /* 径向渐变 */
 13                 /* background: radial-gradient(shape size at position, start-color, ..., last-color); */
 14             }
 15 
 16             .pie::before {
 17                 content: '饼';
 18                 display: block;
 19                 margin-left: 50%;
 20                 height: 100%;
 21                 /* 继承.pie的背景色 */
 22                 background-color: inherit;
 23                 color: #fff;
 24                 display: flex;
 25                 justify-content: center;
 26                 align-items: center;
 27                 border-radius: 0 50px 50px 0;
 28                 transform-origin: left;
 29                 transform: rotate(1deg);
 30                 animation: spin 6s linear infinite, bg 12s step-start infinite;
 31                 /* step-start/step-end 动画瞬变 */
 32             }
 33 
 34             @keyframes spin {
 35                 to {
 36                     transform: rotate(180deg);
 37                 }
 38             }
 39             @keyframes bg {
 40                 50% {
 41                     background: #9ACD32;
 42                 }
 43             }
 44 
 45 /* 饼图进度样式结束 */
 46 
 47 /* 环形进度条开始 */
 48             .ring {
 49                 width: 100px;
 50                 height: 100px;
 51                 background: #9ACD32;
 52                 border-radius: 50px;
 53                 position: relative;
 54             }
 55             /* 环形进度条 */
 56             .child-ring{
 57                 width: 100%;
 58                 height: 100%;
 59                 background-color: inherit;
 60                 border: 6px solid #1D7DB1;
 61                 box-sizing: border-box;
 62                 border-radius: 50%;
 63             }
 64             /* 左边遮罩 */
 65             .left{
 66                 width: 50%;
 67                 height: 100%;
 68                 position: absolute;
 69                 top: 0;
 70                 left: 0;
 71                 background-color: transparent;
 72                 border-radius: 50px 0 0 50px;
 73                 overflow: hidden;
 74             }
 75             .left-c{
 76                 width: 100%;
 77                 height: 100%;
 78                 background-color: #9ACD32;
 79                 border-radius: 50px 0 0 50px;
 80                 
 81                 /* 动画  左半部延时6s执行*/
 82                 transform-origin: right;
 83                 transform: rotate(0deg);
 84                 animation: ring 6s 6s linear 1;
 85                 /* 动画保持最后一个状态 */
 86                 animation-fill-mode: forwards;
 87             }        
 88             /* 右边遮罩 */
 89             .right{
 90                 width: 50%;
 91                 height: 100%;
 92                 position: absolute;
 93                 top: 0;
 94                 right: 0;
 95                 background-color: transparent;
 96                 border-radius: 0 50px 50px 0;
 97                 overflow: hidden;
 98             }
 99             .right-c{
100                 width: 100%;
101                 height: 100%;
102                 background-color: #9ACD32;
103                 border-radius: 0 50px 50px 0;
104                 
105                 /* 动画 */
106                 transform: rotate(0deg);
107                 transform-origin: left;
108                 animation: ring 6s linear 1;
109                 animation-fill-mode: forwards;
110             }
111             @keyframes ring {
112                 to{
113                     transform: rotate(180deg);
114                 }
115             }
116 /* 环形进度条结束 */

css3实现饼状图进度及环形进度条


相关文章

  • ERP不规范,同事两行泪
    最近的很多次对外交流,都聊到了ERP建设的话题,并且无一例外的不那么让人省心,回想我这么多年走过的ERP坑坑路,在这里也写下经验和总结,希望能给正在或者即将走上ERP建设路的企业一些思考和帮助. 导读 1.几个瞎眼而普遍的案例 2.ERP的 ...
  • 我是一名项目经理,在过去的四个月里,我把一个项目带崩了(上线后频出问题,用户无法使用).在最近的几天,我每天都在反思自己,我都在问自己以下几个问题: 1.我做错了什么? 2.我在其中占有多重的因素? 以下内容,我将回答以上问题,并在最后说一 ...
  • 团队如何最大限度地发挥Scrum和敏捷的优势? 回想一下,Scrum团队在Scrum的框架内定义了自己的流程.这其中包括方法.工具和互动以及如何履行Scrum角色的职责.如何使用工件和事件等. 如何确定团队做什么以及怎么做?从产品管理方法到 ...
  • 前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --regi ...
  • [翻译 EF Core in Action 1.9] 掀开EF Core的引擎盖看看EF Core内部是如何工作的
    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core 书籍.原版地址. 是除了官方文档外另 ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.055 s.
京ICP备10005923号