从左到右填充渐变

Question

我正在使用的自定义 htm5 播放器中有音量滑块，但我遇到了问题，当您拖动此音量滑块拇指时，它后面的所有内容都应该是蓝色的，但背景颜色来自底部。我试过了：How to rotate background in CSS?

但它完全消失了。我也用javaScript来找出拖了多少步：

function updateSlider(slideAmount) {
  mediaPlayer.volume = slideAmount;
  $('#volumeAmount').css('background-position', '0 '+ slideAmount*100 +'%');
}

和html：

<input class="volume-slider" id="volumeAmount" type="range" value="1" max="1" step="0.01" onchange="updateSlider(this.value)" name="center"style="position:relative; left:40%; top:19%;"/>

和CSS：

#volumeAmount{
  width: 60px;
  position:absolute;
  top:10%;
  left:30%;
  margin: 0.8em 0.0em 0.0em;
}
#volumeAmount:after{
  -webkit-transform: skew(90deg, 0deg);
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whiteSmoke 50%, #90C7E0  50%);
}

这是另一个问题的新版本，但这是我所拥有的：

#volumeAmount{
  width: 60px;
  position:absolute;
  top:10%;
  left:30%;
  margin: 0.8em 0.0em 0.0em;
  -webkit-transform: skew(90deg, 0deg);
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whiteSmoke 50%, #90C7E0 50%);
}

和一些图片：

Answer 1

为什么渐变从底部开始填充？

由于实际渐变及其定位的结合，它是自下而上填充的：

渐变是 to bottom 渐变，因此上半部分的颜色为 whitesmoke，下半部分的颜色为 #90C7E0。
在幻灯片上，渐变的位置在 Y 轴上增加，因此它自然会向上移动而不是向任何一侧移动。

下面的代码片段是有问题代码的 div 元素 + 动画（为简单起见）的演示。

div {
  width: 200px;  /* changed just for demo */
  height: 100px;  /* just for demo */
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whitesmoke 50%, #90C7E0 50%);
  animation: fill 2s ease infinite;  /* just for demo */
}
@keyframes fill {
  to {
    background-position: 0 100%;
  }
}

<div>Hello</div>

如何让它从左到右填充？

您可以通过进行以下更改使其从左到右填充：

将渐变从 to bottom 渐变更改为 to right 渐变，因为填充应从左到右。
更改渐变的 background-size，使其在 X 轴上为 200%，在 Y 轴上为 100%。
在幻灯片上，减小元素在 X 轴上的位置（即，使其转到 -100% 0）。

下面是固定代码的演示。我再次使用 div 和动画完成了它，但它应该很容易理解更改并使其适应您的滑块（因为滑块已经在工作）。

div {
  width: 200px;  /* changed just for demo */
  height: 100px;  /* just for demo */
  background-size: 200% 100%;
  background-image: linear-gradient(to right, whitesmoke 50%, #90C7E0 50%);
  animation: fill 2s ease infinite;  /* just for demo */
}
@keyframes fill {
  to {
    background-position: -100% 0;
  }
}

<div>Hello</div>

从左到右填充渐变

Fill gradient from left to right

javascript

css

jquery

linear-gradients