使用javascript更改动画背景中的渐变颜色
使用javascript更改动画背景中的渐变颜色
提问于 2018-06-25 05:23:02
我正在尝试添加一个按钮到我的网站，它将改变线性渐变动画中的两种渐变颜色之一。动画目前正在工作，并在我的网站的后台运行。
动画javascript如下所示
var angle = 0
var changeBackground = function (){
angle = angle + 1
document.body.style.backgroundImage = "linear-gradient(" + angle +"deg, #000000, #666"
requestAnimationFrame(changeBackground)
}
changeBackground ()我想添加这个html按钮。当您单击它时，上述动画中的颜色#666将切换为#d22c1f。
<button class="Btn" id="myBtn">Click</button>我发现这个"https://codepen.io/Chrono79/pen/YxyJqw“非常接近，但是在我的动画中实现这段代码时遇到了麻烦。另外，我只想让它在两种颜色之间切换，在这个例子中，它生成一个随机的rgb颜色。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-25 06:17:43
颜色变量和按钮上的事件侦听器，您可以在两种颜色之间切换
堆栈代码段
var angle = 0, color = "#666";
var changeBackground = function() {
angle = angle + 1
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, #000000, " + color;
requestAnimationFrame(changeBackground)
}
changeBackground()
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#666") ? "#666" : "#d22c1f";
})<button class="Btn" id="myBtn">Click</button>
Stack Overflow用户
发布于 2018-06-25 05:28:57
这个实现怎么样？
var angle = 0;
var changeBackground = function (){
angle += 1;
document.body.style.backgroundImage = "linear-gradient(" + angle +"deg,
#000000, #666"
var interval = setInterval(function(){
angle += 1;
document.body.style.backgroundImage = "linear-gradient(" + angle +"deg,
#000000, #666"
if (angle % 90 === 0) clearInterval(interval);
}, 5)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51014072
复制相关文章
相似问题