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 /* 环形进度条结束 */