你如何在CSS中制作进度条，该进度条将具有基于0%到20%红色，20%到40%蓝色等值的颜色...另外，我想一直显示颜色，而不仅仅是当它达到值时（这样，进度条的一部分将是红色，部分蓝色和其他颜色从一开始就消失了，并且颜色会随着值的下降而消失）。
2 回答
烙印99
TA贡献1829条经验 获得超13个赞
如果您尝试按照当前进度实现渐变进度条，请尝试在CSS中使用属性。linear-gradient()
这是一个工作模型：
#prog-bar-cont {
width: 75vw;
height: 2.5em;
}
#prog-bar-cont #prog-bar {
background: #ffff;
width: 100%;
height: 100%;
border-color: #000;
border-style: solid;
border-radius: 50px;
overflow: hidden;
position: relative;
}
#prog-bar-cont #prog-bar #background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*Actual Stuff*/
background: linear-gradient(-90deg, violet, #30b3fc, #70dc23, yellow, orange, #ff1076);
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
transition: all 3s;
-webkit-transition: all 3s;
}
#prog-bar-cont:hover #prog-bar #background {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
<h1>Rainbow Progress Bar</h1>
<p>Try hovering over the bar</p>
<div id='prog-bar-cont'>
<div id="prog-bar">
<div id="background"></div>
</div>
</div>
回首忆惘然
TA贡献1847条经验 获得超11个赞
您可以通过将进度条嵌套在父元素中并应用css属性来实现此目的。overflow: hidden
您可以将类的 更改为所需的百分比。即 将显示 60% 的条形图。widthbar-clippercalc(300px * 0.6)
.bar-clipper {
width: calc(300px * 0.8);
height: 20px;
overflow: hidden;
position: absolute;
}
.bar-wrapper {
width: 300px;
height: 20px;
display: flex;
position: absolute;
}
.bar-wrapper span {
width: 100%;
height: 100%;
}
.bar-wrapper .bar1 {
background-color: #163f5f;
}
.bar-wrapper .bar2 {
background-color: #21639b;
}
.bar-wrapper .bar3 {
background-color: #3caea3;
}
.bar-wrapper .bar4 {
background-color: #f6d65b;
}
.bar-wrapper .bar5 {
background-color: #ed543b;
}
<body>
<div class="bar-clipper">
<div class="bar-wrapper">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
<span class="bar5"></span>
</div>
</div>
</body>
小提琴链接： https://jsfiddle.net/L13yrgbm/
添加回答
举报
0/150
提交
取消