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 /* 環形進度條結束 */
