JavaScript 및 CSS를 사용한 자동 배경 변경에 대한 추가 연습
<p>이전 질문에서 (Jan)의 도움으로 자동 배경 변경 문제를 해결했습니다. </p>
<p>이전 질문: JavaScript와 CSS를 사용한 자동 배경 변경</p>
<p>하지만 배경이 바뀌면 색상의 점프가 눈에 띄기 때문에 색상 변경이 원활하고 느리게 진행되기를 바랍니다. </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">var i = 0;
함수 변경BackgroundColor() {
var 배경 = document.getElementById("배경");
if (i % 2 === 0) {
background.classList.remove("배경-몸");
} 또 다른 {
background.classList.add("배경-몸");
}
나는 = 나는 + 1;
}
setInterval(changeBackgroundColor, 3 * 1000);</pre>
<pre class="brush:css;toolbar:false;">html,body{
너비: 100%;
오버플로-x: 숨겨진 !중요;
높이: 100%;
오버플로-y: 숨겨진 !중요;
}
#배경{
너비: 100%;
높이: 100%;
배경: #39c787;
배경 이미지: -webkit-gradient(선형, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
전환: 모두 5초 용이함;
-webkit-transition: 모든 5의 용이성;
-moz-transition: 모두 5초 용이성;
-o-전환: 모두 5의 용이함;
-ms-전환: 모두 5초 용이성;
}
.배경-본문{
배경: #e0922d !중요;
배경 이미지: -webkit-gradient(선형, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
전환: 모두 5초 용이성;
-webkit-transition: 모든 5의 용이성;
-moz-transition: 모두 5초 용이성;
-o-전환: 모두 5의 용이함;
-ms-전환: 모두 5초 용이성;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</스크립트>
<body id="배경"></body></pre>
<p><br /></p>
