有没有办法使用 ::before 伪类旋转 CSS 元素以显示从 0 度到 360 度旋转的线性渐变? [重复]

问题描述 投票:0回答:0

问题定义

我有一个 div 标签,它的 border-radius 为 50% 以显示一个圆圈。这是下面的 HTML 代码:

.pie-wrapper {
  height: 2.5em;
  width: 2.5em;
  margin: 15px auto;
  position: relative;
}

.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;
}

.pie-wrapper--solid:before {
  border-radius: 0 100% 100% 0 / 50%;
  content: "";
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
}

.pie-wrapper--solid.progress-88 {
  border: 5px ridge blue;
  background: linear-gradient(to right, springgreen 50%, #ff0000 50%);
}

.pie-wrapper--solid.progress-88:before {
  background: springgreen;
  transform: rotate(0deg);
  animation-name: change-color;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
}


/* Keyframes */

@keyframes change-color {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
<div class="pie-wrapper pie-wrapper--solid progress-88">
</div>

我试过的

我应用线性渐变来创建具有两种颜色的背景。我继续尝试不同的linear-gradient类型,例如to leftto bottomto top等。这没有达到目的。

期待

动画按预期旋转到 180 度,但任何大于 rotate(180deg) 的数字都不会覆盖饼图的预期部分。目标是让红色部分在rotate(360deg)时完全覆盖动画关键帧中的绿色部分,即一个完整的红色圆圈。我还希望动画逆时针旋转,这可以通过在旋转函数中放置一个负值来实现。

亲切的问候

html css css-animations linear-gradients
© www.soinside.com 2019 - 2024. All rights reserved.