支持移动端（rem），PC端，CSS SVG 实现成功动画、打勾动画、对号动画
借鉴了其他博客的内容，但设置了一个关键属性
viewbox来支持自适应（rem）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <title>支持移动端，PC端，CSS SVG 实现成功动画、对钩动画、对号动画</title> <style> html, body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .small-svg { flex-grow: 0; flex-shrink: 0; width: 1rem; height: 1rem; background: #da2f23; border-radius: 50%; margin-right: 20px; } .big-svg { flex-grow: 0; flex-shrink: 0; width: 5rem; height: 5rem; background: #da2f23; border-radius: 50%; } .tick { stroke-dasharray: 400; stroke-dashoffset: 400; animation: tick .6s ease-in-out 1.2s forwards; } @keyframes tick { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } } .circle { /* stroke-dasharray用于创建虚线 */ /* 190 * 2 * Math.PI = 1194*/ /* 这个值表示两个虚线之间的距离 */ stroke-dasharray: 1194; /* 指定了dash模式到路径开始的距离，就是实线虚线绘制的起点距路径开始的距离 */ stroke-dashoffset: 1194; animation: circle .6s ease-in-out .6s forwards; } @keyframes circle { from { stroke-dashoffset: 1194; } to { stroke-dashoffset: 0; } } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 400 400" class="small-svg"> <!-- 绘制圆形 --> <!-- transform-origin="200 200" 设置基准点 --> <circle class="circle" fill="none" stroke="#68e534" stroke-width="20" cx="200" cy="200" r="190" stroke-linecap="round" transform="rotate(90)" transform-origin="200 200"></circle> <!-- 绘制多边形 ,points:多边形的转折点坐标 stroke-linejoin:转折点--> <polyline class="tick" fill="none" stroke="#68e534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round" stroke-linejoin="round"></polyline> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 400 400" class="big-svg"> <circle class="circle" fill="none" stroke="#68e534" stroke-width="20" cx="200" cy="200" r="190" stroke-linecap="round" transform="rotate(90)" transform-origin="200 200"></circle> <polyline class="tick" fill="none" stroke="#68e534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round" stroke-linejoin="round"></polyline> </svg> </body> </html>
