我有一个 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 left,to bottom,to top等。这没有达到目的。
动画按预期旋转到 180 度,但任何大于 rotate(180deg) 的数字都不会覆盖饼图的预期部分。目标是让红色部分在rotate(360deg)时完全覆盖动画关键帧中的绿色部分,即一个完整的红色圆圈。我还希望动画逆时针旋转,这可以通过在旋转函数中放置一个负值来实现。
亲切的问候