模仿支付宝支付成功特效:svg圆圈转动+打钩

效果图(这里用点击事件来模拟触发事件):

代码：

HTML

    <main>
      <div class="box">
        <svg class="arrow" width="40" height="40" viewBox="0 0 40 40">
          <circle
            cx="50%"
            cy="50%"
            r="19"
            fill="none"
            stroke="#ffffff"
            stroke-width="2"
            class="circle"
          ></circle>
          <polyline
            points="8,20 18,30 30 12"
            fill="none"
            stroke="#ffffff"
            stroke-width="2"
            class="hookmark"
          ></polyline>
        </svg>
      </div>
    </main>

css

   <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      main {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 100vh;
      }
      /* 按钮添加样式 */
      .box {
        width: 180px;
        height: 60px;
        background-image: linear-gradient(160deg, #0093e9, #80d0c7);
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 2px rgba(0, 147, 233, 0.28);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      /* 打钩样式 */
      .box .hookmark {
        opacity: 0;
      }
      /* 加载完成时 出现打钩的样式 */
      .box.completed .hookmark {
        opacity: 1;
        stroke-dasharray: 100 100;
        stroke-dashoffset: 100;
        animation: 1s linear hookmarkTransform forwards 0.5s;
      }

      /* 初始化圆圈(opacity: 0;隐藏状态) */
      .box .circle {
        opacity: 0;
        transition: all 2.5s;
        stroke-dasharray: 314;
        stroke-dashoffset: 314;
      }

      /* 加载完成时 圈圈出现 */
      .box.completed .circle {
        opacity: 1;
        stroke-dashoffset: 0;
      }

      /* 打钩的动态样式 */
      @keyframes hookmarkTransform {
        from {
          stroke-dasharray: 100 100;
          stroke-dashoffset: 100;
        }
        to {
          stroke-dasharray: 100 100;
          stroke-dashoffset: 0;
        }
      }
    </style>

JS

var uploadButton = document.querySelector('.box')

uploadButton.addEventListener('click', () => {
  // //点击事件
  uploadButton.classList.add('completed')
})