html - 我无法让@keyframes 填充超过 180 度以停止我想要的位置

Question

我有三个进度圈，如下所示。我面临的问题是最后一个。我试图让它完成圆圈的 3/4，但我在 180 度标记处遇到问题。

下图显示了我希望进度条停止的位置，但对于我的生活，我无法解决。

图像上的箭头是我试图让它停下来的位置。

任何建议或指导将不胜感激。

.circle-wrap {
  margin: 50px auto;
  width: 240px;
  height: 240px;
  background: #e5e5e5;
  border-radius: 50%;
  transform: rotate(-125deg);
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 240px, 240px, 120px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 120px, 240px, 0px);
  background-color: #ffe100;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate( var(--rt));
  }
}

.circle-wrap .inside-circle {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: #fff;
  line-height: 185px;
  text-align: center;
  top: 28px;
  left: 28px;
  z-index: 100;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: -4px;
  transform: rotate(114deg);
  font-style: italic;
  font-family: brandon-grotesque;
  padding: 0;
  position: relative;
}

.circle-wrap .inside-circle span {
  font-size: 1.5rem;
  letter-spacing: 0;
}

.circle-wrap .inside-circle .cone {
  width: 0;
  height: 0;
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;
  border-top: 125px solid white;
  border-radius: 50%;
  transform: rotate(192deg);
  position: absolute;
  bottom: -33px;
  left: -96px;
  z-index: -1;
}

.circle-wrap .inside-circle .cone .dial-speeds {
  transform: rotate(179deg);
  position: relative;
  z-index: 1;
  font-weight: 400;
  font-style: normal;
}

.circle-wrap .inside-circle .cone .dial-speeds .left {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  left: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  right: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right span {
  right: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

.circle-wrap .inside-circle .cone .dial-speeds .left span {
  left: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

 <div class="grid gap-0 grid-cols-3 text-left pt-24 max-w-[1000px] mx-auto">
    <div class="circle-wrap">
      <div class="circle">
        <div class="mask full">
          <div class="fill fill"></div>
        </div>
        <div class="mask half">
          <div class="fill fill" style="--rt:85deg"></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>

    <div class="circle-wrap">
      <div class="circle">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill" style="--rt:125deg"></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>
    <div class="circle-wrap">
        <div class="circle">
          <div class="mask full">
            <div class="fill" style="--rt:180deg;"></div>
          </div>
          <div class="mask half" style="clip: rect(-71px, 404px, 240px, 0px);">
            <div class="fill"></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>
</div>

标签： htmlcsscss-animations

Answer 1

该var()值将在您的圈子的父级上设置，因此它适用于两个 .fill元素。然后使用较小的旋转或将其除以 2 （下面的演示）以与视觉一致（2 个元素在您的代码中旋转和重叠）

.circle-wrap {
  margin: 50px auto;
  width: 240px;
  height: 240px;
  background: #e5e5e5;
  border-radius: 50%;
  transform: rotate(-125deg);
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 240px, 240px, 120px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 120px, 240px, 0px);
  background-color: #ffe100;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate( calc(var(--rt) / 2 ));
  }
}

.circle-wrap .inside-circle {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: #fff;
  line-height: 185px;
  text-align: center;
  top: 28px;
  left: 28px;
  z-index: 100;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: -4px;
  transform: rotate(114deg);
  font-style: italic;
  font-family: brandon-grotesque;
  padding: 0;
  position: relative;
}

.circle-wrap .inside-circle span {
  font-size: 1.5rem;
  letter-spacing: 0;
}

.circle-wrap .inside-circle .cone {
  width: 0;
  height: 0;
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;
  border-top: 125px solid white;
  border-radius: 50%;
  transform: rotate(192deg);
  position: absolute;
  bottom: -33px;
  left: -96px;
  z-index: -1;
}

.circle-wrap .inside-circle .cone .dial-speeds {
  transform: rotate(179deg);
  position: relative;
  z-index: 1;
  font-weight: 400;
  font-style: normal;
}

.circle-wrap .inside-circle .cone .dial-speeds .left {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  left: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  right: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right span {
  right: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

.circle-wrap .inside-circle .cone .dial-speeds .left span {
  left: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

<div class="grid gap-0 grid-cols-3 text-left pt-24 max-w-[1000px] mx-auto">
    <div class="circle-wrap" style="--rt:85deg">
      <div class="circle">
        <div class="mask full">
          <div class="fill fill"></div>
        </div>
        <div class="mask half">
          <div class="fill fill"></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>

    <div class="circle-wrap" style="--rt:125deg">
      <div class="circle">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></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>
    <div class="circle-wrap" style="--rt:180deg;">
        <div class="circle">
          <div class="mask full">
            <div class="fill"></div>
          </div>
          <div class="mask half">
            <div class="fill"></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>
</div>