我尝试了几个指南来创建一个根据百分比填充的圆形,但似乎无法实现(没有动画,只有静态CSS圆形)。
圆形边框目前遵循 background-image: linear-gradient
,我首先将其设置为 (90+(360*0.percent))deg
,第二个设置为 90deg
。在前50%时它工作得很好,但超过这个范围后它就无法正确填充。
.circle {
position: relative;
top: 5px;
left: 5px;
text-align: center;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #ffffff;
}
.circle-border {
position: relative;
text-align: center;
width: 110px;
height: 110px;
margin-left: 30%;
border-radius: 100%;
background-color: #E53B3B;
background-image: linear-gradient(162deg, transparent 50%, #f0f0f0 50%), linear-gradient(90deg, #f0f0f0 50%, transparent 50%);
}
<div class="circle-border">
<div class="circle">
</div>
</div>
当我想要填充超过50%的圆时,应更改linear-gradient
的哪些值?