Question

好的，所以我有一个条形图，根据设置的百分比将填充到设定的百分比。

但是我怎么能改变它，根据百分比有颜色的转换。

例如 0％至25％红色慢慢变为绿色接近100％

HTML

<div class="progress">
</div>

CSS

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {
    content:'\A';
    position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:90%;
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

@-webkit-keyframes filler {
    0% {
        width:0;
    }
}
@-moz-keyframes filler {
    0% {
        width:0;
    }
}
@keyframes filler {
    0% {
        width:0;
    }
}

对此的任何帮助都会很棒，谢谢你。

Answer 1

您可以在此使用linear-gradient并在{strong> X轴上设置动画:after伪元素，然后逐渐显示下方的父元素。

同样animation-fill-mode: forwards是动画完成后将:after保持在右侧。

.progress {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  background: linear-gradient(to right, red 25%, green 100%);
  position: relative;
  overflow: hidden;
}
.progress:after {
  content: '\A';
 position: absolute;
  top: 0;
  bottom: 0;
  background: white;
  left: 0;
  width: 100%;
  -webkit-animation: filler 2s ease-in-out;
  -moz-animation: filler 2s ease-in-out;
  animation: filler 2s ease-in-out;
  animation-fill-mode: forwards;
}
@-webkit-keyframes filler {
  100% {
    transform: translateX(100%);
  }
}
@-moz-keyframes filler {
  100% {
    transform: translateX(100%);
  }
}
@keyframes filler {
  100% {
    transform: translateX(100%);
  }
}

<div class="progress"></div>

Answer 2

您可以使用HTML5进度元素：

<progress></progress>

你可以给出这样的风格：

progress[value] {
  //your style
}

您可以在this链接中找到示例用法。

如何根据宽度动态更改颜色

2 个答案: