如何使用jQuery为带border-radius的.counter-box圆形实现从右到左的边框动画

针对你给出的.counter-box圆形结构，我整理了两种实用的实现方案，分别适合不同的场景需求：

方案一：纯CSS+伪元素配合jQuery控制动画 #

这个方案不需要额外的HTML元素，仅通过CSS伪元素和jQuery的类切换来实现从右到左的边框绘制动画。

第一步：基础CSS样式 #

先给.counter-box和伪元素设置基础样式，模拟圆形边框的两个半圆：

.counter-box {
  position: relative;
  width: 180px; /* 根据你的需求调整尺寸 */
  height: 180px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
}

/* 用两个伪元素分别模拟圆形的右、左半圆边框 */
.counter-box::before,
.counter-box::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border: 4px solid #3498db; /* 边框颜色和宽度 */
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); /* 动画曲线可以自定义 */
}

/* 右半圆：初始隐藏 */
.counter-box::after {
  left: 50%;
  border-top-right-radius: 90px;
  border-bottom-right-radius: 90px;
  border-left: none;
}

/* 左半圆：初始隐藏，以右侧为旋转原点 */
.counter-box::before {
  left: 0;
  border-top-left-radius: 90px;
  border-bottom-left-radius: 90px;
  border-right: none;
  transform-origin: right center;
}

/* 动画触发类：显示右半圆 */
.counter-box.show-right::after {
  opacity: 1;
}

/* 动画触发类：旋转并显示左半圆 */
.counter-box.show-left::before {
  opacity: 1;
  transform: rotate(180deg);
}

/* 内部文字层级要高于边框 */
.result {
  position: relative;
  z-index: 1;
  text-align: center;
}

第二步：jQuery控制动画流程 #

通过jQuery的类切换和延迟，实现从右到左的绘制顺序：

$(document).ready(function() {
  const $counterBox = $('.counter-box');
  
  // 定义动画启动函数
  function startBorderAnimation() {
    // 先显示右半圆
    $counterBox.addClass('show-right');
    
    // 延迟和CSS过渡时间一致，再显示并旋转左半圆，模拟从右到左绘制
    setTimeout(() => {
      $counterBox.addClass('show-left');
    }, 700);
  }
  
  // 示例：页面加载完成后自动启动动画
  startBorderAnimation();
  
  // 也可以绑定点击事件触发动画
  // $counterBox.on('click', startBorderAnimation);
});

方案原理 #

我们把圆形边框拆成两个半圆，初始时都透明隐藏。动画开始时先显示右侧半圆，接着让左侧半圆以右侧为轴旋转180度并显示，视觉上就形成了从右到左完整绘制圆形边框的效果。

方案二：SVG+jQuery动态描边动画（适合进度联动场景） #

如果你的需求是让边框动画和内部的count数值（比如14、32、92）联动，这个SVG方案会更灵活，能精准控制绘制进度。

第一步：修改HTML结构 #

在.counter-box内嵌入一个SVG圆形，用于描边动画：

<div class="counter-box">
  <!-- SVG圆形用于边框动画 -->
  <svg class="circle-stroke" viewBox="0 0 180 180">
    <circle cx="90" cy="90" r="82" stroke="#3498db" stroke-width="4" fill="none" />
  </svg>
  
  <div class="result photos"><span class="count">14</span><span><br>Photos</span></div>
  <div class="result reduce"><span class="count">32</span>%<span><br>Smaller</span></div>
  <div class="result size"><span class="count">92</span>MB<span><br>Saving</span></div>
</div>

第二步：CSS样式设置 #

.counter-box {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.circle-stroke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 让描边起始点在右侧，实现从右到左绘制 */
}

.result {
  position: relative;
  z-index: 1;
  text-align: center;
}

第三步：jQuery控制描边动画 #

利用SVG的stroke-dasharray和stroke-dashoffset属性，配合jQuery的animate方法实现平滑绘制：

$(document).ready(function() {
  const $circle = $('.circle-stroke circle');
  // 获取圆形的周长，用于计算描边参数
  const circleLength = $circle[0].getTotalLength();
  
  // 初始化描边参数：完全隐藏边框
  $circle.css({
    'stroke-dasharray': circleLength,
    'stroke-dashoffset': circleLength
  });
  
  // 启动从右到左的描边动画
  function drawBorder() {
    $circle.animate(
      { 'stroke-dashoffset': 0 }, // 从完全隐藏到完全显示
      {
        duration: 2000, // 动画时长（毫秒）
        easing: 'easeInOutCubic',
        step: function(progress) {
          // 这里可以同步更新内部count数值的动画（比如配合countUp插件）
          // 示例：根据进度计算数值
          // const currentValue = Math.floor(progress * targetCount);
          // $('.count').text(currentValue);
        }
      }
    );
  }
  
  // 启动动画
  drawBorder();
});

方案原理 #

SVG圆形的stroke-dasharray属性可以把描边拆成线段，stroke-dashoffset控制线段的偏移量。我们初始时让偏移量等于周长（边框完全隐藏），然后通过jQuery动画把偏移量降到0，配合rotate(-90deg)让起始点在右侧，就实现了从右到左的边框绘制动画。

两种方案都能满足你的需求，伪元素方案兼容性更好，SVG方案更适合需要进度联动的场景，可以根据你的实际需求选择。

内容的提问来源于stack exchange，提问作者yariv bar