Question

正如标题所说。我对this网站进行了编码，但手机上的背景动画出现了问题。我将在下面发布渐变的javascript，但有人可以检查一下源，请帮助我了解为什么它不起作用。

如果您需要更多信息，请告诉我，我们很乐意提供。

用于背景动画的JavaScript

var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";

var changeBackground = function() {
  angle = angle + .3
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('h2').forEach(h2 => h2.style.color = font);
}

var changeShadow = function() {
  document.querySelectorAll('h2').forEach(h2 => h2.style.textShadow = shadow);
}


changeBackground()
changeFont()
changeShadow();

document.querySelector('.myBtn').addEventListener('click', function () {
  color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
  colors = (colors != "#000") ? "#000" : "#759ef3";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
  shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
  changeFont()
  changeShadow();
})

document.querySelector(".myBtn").addEventListener("click", function () {
  document.body.classList.toggle("light")
})

为什么我的线性渐变背景动画在手机上坏了？

0 个答案: