javascript - 从左到右填充渐变

Question

我正在做的自定义 htm5 播放器中有音量 slider ，但我遇到了问题，当您拖动此音量 slider 拇指时，它后面的所有内容都应该是蓝色的，但背景颜色来自底部。我试过: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

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

由于实际梯度及其定位的结合，它是自下而上填充的:

• 渐变是到底部的渐变，因此上半部分的颜色为 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 和动画完成了它，但它应该很容易理解更改并使其适应您的 slider (因为 slider 已经在工作)。

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>