?> Background：:point_right: gradient, animation, SVG
<script v-pre type="text/x-template" id="pie-chart"> <style> main{ width: 100%; padding: 60px 0; } .chart{ display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; margin-bottom: 29px; } .chart > p{ width: 199px; } .chart > div{ width: 100px; height: 100px; border-radius: 50%; background-color: #E8E2D6; background-image: linear-gradient(to right, transparent 50%, #b4a078 0); } .chart:nth-of-type(1) div::before { content: ""; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-color: inherit; transform-origin: 0 50%; transform: rotate(.3turn); } .chart:nth-of-type(2) div::before{ content: ""; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-color: inherit; transform-origin: 0 50%; animation: pie-chart-spin1 3s linear 1.6 forwards, pie-chart-bg1 3s step-end 1 forwards; } .chart:nth-of-type(3) > div::before{ content: ""; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-color: inherit; transform-origin: 0 50%; animation: pie-chart-spin1 3s linear 1.6 forwards, pie-chart-bg1 3s step-end 1 forwards; } .chart:nth-of-type(3) > div::before{ animation-delay: -1.5s; } svg{ width: 100px; height: 100px; transform: rotate(-90deg); background: #E8E2D6; border-radius: 50%; } .chart:nth-of-type(4) svg > circle{ fill: #E8E2D6; stroke: #b4a078; stroke-width: 32; stroke-dasharray: 0 100; animation: pie-chart-fillup 6s linear infinite; } .chart:nth-of-type(5) svg > circle:nth-of-type(1){ fill: #fff; stroke: #b4a078; stroke-width: 32; stroke-dasharray: 0 100; /* 36% */ stroke-dashoffset: -64; animation: pie-chart-per1 2s linear 1 forwards; } .chart:nth-of-type(5) svg > circle:nth-of-type(2){ fill: transparent; stroke: #cabca0; stroke-width: 32; stroke-dasharray: 0 100; /* 32% */ stroke-dashoffset: -32; animation: pie-chart-per2 2s linear 1 forwards; } .chart:nth-of-type(5) svg > circle:nth-of-type(3){ fill: transparent; stroke: #e1d9c9; stroke-width: 32; stroke-dasharray: 0 100; /* 32% */ stroke-dashoffset: 0; animation: pie-chart-per3 2s linear 1 forwards; } @keyframes pie-chart-spin1 { to { transform: rotate(.5turn); } } @keyframes pie-chart-bg1 { to { background: #b4a078; } } @keyframes pie-chart-spin2 { to { transform: rotate(.5turn); } } @keyframes pie-chart-bg2 { 50% { background: #b4a078; } } @keyframes pie-chart-fillup{ to { stroke-dasharray: 100 100; } } @keyframes pie-chart-per1{ to { stroke-dasharray: 37 100; } } @keyframes pie-chart-per2{ to { stroke-dasharray: 32 100; } } @keyframes pie-chart-per3{ to { stroke-dasharray: 32 100; } } </style>① rotate()
② css animation
④ start animation from the specified location
⑤ SVG change dasharray to percentage
⑥ SVG add multiple colors