我尝试过创建渐变颜色变化的横幅,就像这个一样 site但似乎遇到了严重的色带问题。谁能告诉我在这个网站上是否可以在不使用canvas元素的情况下实现变色效果?
抱歉,我是新手。
欢迎任何反馈。
此 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);
}
最佳答案
您可以使用线性渐变
背景图像和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>
关于javascript - CSS3 线性渐变带,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34529921/