JavaScript 및 CSS를 사용한 자동 배경 변경에 대한 추가 연습
P粉875565683
2023-08-15 16:52:20
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
배경색을 부드럽게 변경하려면 background-color 속성에 전환 속성을 추가해야 합니다. 다음 코드는 이 효과를 얻을 수 있습니다:
으아악다른 배경과 함께 절대 위치에 있는 의사 요소를 사용한 다음 그 위에 불투명도 변경 전환을 만듭니다.