目前发现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动态设置值，那么就会出现圆的进度条的效果。