JavaScript和CSS自动背景更改的进一步实践

Question

在我之前的问题中，在（Jan）的帮助下，我解决了自动背景更改的问题。我之前的问题：使用JavaScript和CSS实现自动背景更改但是当背景更改时，颜色的跳跃是可见的，我希望颜色的变化可以无缝且缓慢地进行。vari=0;functionchangeBackgroundColor(){varbackground=document.getElementById("background&quo

P粉081360775 · Answer

要使背景颜色平滑变化，您需要将过渡属性添加到background-color属性中。以下代码可以实现这一效果：

#background{
  width: 100%;
  height: 100%;
  background: #39c787;
  background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
  transition: background-color 5s ease;
  -webkit-transition: background-color 5s ease;
  -moz-transition: background-color 5s ease;
  -o-transition: background-color 5s ease;
  -ms-transition: background-color 5s ease;
}

.background-body{
  background: #e0922d !important;
  background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
  transition: background-color 5s ease;
  -webkit-transition: background-color 5s ease;
  -moz-transition: background-color 5s ease;
  -o-transition: background-color 5s ease;
  -ms-transition: background-color 5s ease;
}

P粉729198207 · Answer

使用一个绝对定位的伪元素，具有不同的背景，然后在其上进行不透明度的变化过渡。

function changeBackgroundColor() {
  document.body.classList.toggle("alt-background")
  setTimeout(changeBackgroundColor, 4000)
}
changeBackgroundColor()

html, body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  background-image: linear-gradient(135deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

body::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-image: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

body.alt-background::before {
  opacity: 1;
}