CSS @keyframes实现环形进度条无法超过180deg停在指定位置求助

问题根因 #

你当前用的是双遮罩环形进度条实现方案，180度节点动画异常有三个核心问题：

• 错误修改了第三个进度条.mask.half的clip属性，破坏了半侧遮罩的裁剪逻辑
• 给不需要旋转的.mask.full也绑定了旋转动画，只有填充层fill需要执行旋转
• 3/4圈总角度为270度，你只给了full层下的fill设置了180度旋转，half层下的fill没有设置剩余的90度旋转参数

修改步骤 #

1. 调整动画绑定规则，仅给fill层添加动画：

/* 替换原有的动画绑定代码 */
/* .circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
} */
/* 改为如下代码 */
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
}

2. 修正第三个进度条的HTML代码，恢复mask.half的默认裁剪规则，给half层下的fill补充旋转参数：

<div class="circle-wrap">
    <div class="circle">
      <div class="mask full">
        <div class="fill" style="--rt:180deg;"></div>
      </div>
      <!-- 删除原来错误添加的style="clip: rect(-71px, 404px, 240px, 0px);" -->
      <div class="mask half">
        <!-- 新增剩余角度的旋转参数 -->
        <div class="fill" style="--rt:90deg"></div>
      </div>
      <div class="inside-circle">
        abc<span></span>
        <div class="cone">
          <div class="dial-speeds">
            <div class="left">
                <img src="">
              <span>abc</span>
            </div>
            <div class="right">
                <img src="">
              <span>abc</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

修改后总填充角度为180+90=270度，刚好对应3/4圈的展示需求，动画会正常停在目标位置。

内容的提问来源于stack exchange，提问作者John K Bell