我找到了非常漂亮的“百分比饼图”，并希望仅使用 CSS 创建它。无需动画。只需静态“图片”。我明白如果我想创建这种图表，我需要使用元素...
我找到了非常漂亮的“百分比饼图”，并想仅使用 CSS 创建它。无需动画。只需静态“图片”。
我明白如果我想创建这种图表，我需要使用类似这样的元素
问题是
嘿，gus，你可以添加一些小的 CSS 样式
.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: linear-gradient(0deg, lightgray 100%, black 0%)
}
HTML
<div class="circle-border" id="circleElement">
<div class="circle" id="circleElementValue">
aaa
</div>
</div>
JS : 自动显示填充百分比
// let i = 75;
// let deg=Math.round(1.8*i);
// let completed=0;
// let remaining=100-i;
// // completed = (remaining>50)? 50 : completed;
// let backgroundStlye = 'linear-gradient('+deg+'deg, lightgray '+remaining +'%, black '+completed + '%)';
// setTimeout(function(){
// console.log(backgroundStlye);
// document.getElementById("circleElement").style.background =backgroundStlye;
// },i*100);
for(let i=1;i<=100;i++){
let deg=Math.round(1.8*i);
let completed=i;
let remaining=100-i;
completed = (remaining<50)? 0 : completed;
let backgroundStlye = 'linear-gradient('+deg+'deg, lightgray '+remaining +'%, black '+completed + '%)';
setTimeout(function(){
console.log(backgroundStlye);
document.getElementById("circleElement").style.background =backgroundStlye;
document.getElementById("circleElementValue").innerHTML = i+'%';
},i*100);
}
我创建了示例 https://codepen.io/arun-b-shet/pen/mdVVWXo
希望你喜欢