CSS3线性梯度条带

CSS3 linear gradient banding

本文关键字：线性 CSS3      更新时间：2023-09-26

我已经尝试过创建渐变色更改横幅，就像上面的一样网站，但似乎遇到了严重的色带问题。有人能告诉我，如果不使用画布元素，这个网站上的颜色变化效果是否可能吗？

对不起，我是新手。

如有任何反馈，我们将不胜感激。

这个fiddle必须在Firefox中运行。抱歉。

#solid {
  position: absolute;
  width: 100%;
  height: 380px;
  background: -webkit-linear-gradient(top left, rgb(105, 80, 102), #2E8ECE);
  background: -o-linear-gradient(top left, rgb(105, 80, 102), #2E8ECE);
  background: linear-gradient(to bottom right, rgb(105, 80, 102), #2E8ECE);
}

Fiddle

您可以使用linear-gradient背景图像和JavaScript来完成，就像下面的代码片段中一样。所需要的只是通过使用JS setInterval方法不断地改变梯度的rgb()颜色值。

注意：编码是这样进行的，即rgb()值达到某个阈值后，它们会立即返回到原始状态。你也可以修改代码，使其递增，直到达到某个水平，然后递减，使其在高阈值和低阈值之间振荡。

var el = document.querySelector('.gradient-div');
/* Set the initial rgb() color values for the start and end colors */
var startColorRed = 62,
  startColorGreen = 79,
  startColorBlue = 216,
  endColorRed = 251,
  endColorGreen = 38,
  endColorBlue = 103;
/* set the original gradient as the element's background image */
el.style.backgroundImage = 'linear-gradient(90deg, rgb(' + startColorRed + ', ' + startColorGreen + ', ' + startColorBlue + ') 10% , rgb(' + endColorRed + ', ' + endColorGreen + ', ' + endColorBlue + ') 90%)';
/* function to change the gradient's colors */
function changeGrad() {
  /* do whatever math operation that is required on the rgb values of the color */
  if (endColorRed >= 151) endColorRed--;
  else endColorRed = 251;
  if (startColorBlue >= 116) startColorBlue--;
  else startColorBlue = 216;
  if (endColorBlue <= 203) endColorBlue++;
  else endColorBlue = 103;
  if (startColorGreen <= 179) startColorGreen++;
  else startColorGreen = 79;
  if (endColorGreen <= 138) endColorGreen++;
  else endColorGreen = 38;
  el.style.backgroundImage = 'linear-gradient(90deg, rgb(' + startColorRed + ', ' + startColorGreen + ', ' + startColorBlue + ') 10% , rgb(' + endColorRed + ', ' + endColorGreen + ', ' + endColorBlue + ') 90%)';
}
/* Call the changeGrad function at regular intervals to change the gradient's colors */
window.setInterval(changeGrad, 500);
div {
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient-div'></div>

相关文章：