支持移动端（rem），PC端，CSS SVG 实现成功动画、打勾动画、对号动画

Faith-J

已于 2022-10-12 15:01:26 修改

阅读量878

点赞数

文章标签： css3 svg 动画

于 2022-10-12 14:58:00 首次发布

本文链接：https://blog.csdn.net/jcm_zz/article/details/127282631

版权

支持移动端（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>