目前發現svg實現一些動畫效果是比較高效簡單的。
如圓形進度條，只要會stroke-dasharray與stroke-dashoffset屬性基本就可以實現，而且美觀。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .svg{ transform: rotate(-90deg); } .t1{ stroke-dashoffset:0px; animation: donut-show-one linear 5s forwards; } @keyframes donut-show-one { from{ stroke-dashoffset: 0px; } to { stroke-dashoffset: -565px; } } </style> </head> <body> <svg width="300px" height="300px" class="svg"> <circle id="donut-graph" class="t2" r="90" cy="150" cx="150" stroke-width="4" stroke="#000" stroke-linejoin="round" stroke-linecap="round" fill="none"/> <circle id="donut-graph" class="t1" r="90" cy="150" cx="150" stroke-width="4" stroke="#666" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dasharray="565" /> </svg> </body> </html>
stroke-dasharray是實線長度與實線之間距離的設置值，當一個為一個值是就是同等值，就是實線與間隙同等長。
stroke-dashoffset這是偏移值。
這兩個值如果一起使用在stroke-dasharray為圓的周長時而stroke-dashoffset動態設置值，那么就會出現圓的進度條的效果。