进度条不同颜色
你如何在CSS中制作进度条，该进度条将具有基于0%到20%红色，20%到40%蓝色等值的颜色...另外，我想一直显示颜色，而不仅仅是当它达到值时（这样，进度条的一部分将是红色，部分蓝色和其他颜色从一开始就消失了，并且颜色会随着值的下降而消失）。
有只小跳蛙浏览 223回答 2
2回答
-
烙印99
如果您尝试按照当前进度实现渐变进度条，请尝试在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> -
回首忆惘然
您可以通过将进度条嵌套在父元素中并应用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/
随时随地看视频慕课网APP
相关分类
JavaScript