简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
JavaScript 및 CSS를 사용한 자동 배경 변경에 대한 추가 연습
P粉875565683
P粉875565683 2023-08-15 16:52:20
0
2
492
<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>
P粉875565683
P粉875565683

모든 응답(2)
P粉081360775
P粉0813607752023-08-16 15:17:43 2층

배경색을 부드럽게 변경하려면 background-color 속성에 전환 속성을 추가해야 합니다. 다음 코드는 이 효과를 얻을 수 있습니다:

으아악
좋다 +0
답글 추가
P粉729198207
P粉7291982072023-08-16 09:38:10 1층

다른 배경과 함께 절대 위치에 있는 의사 요소를 사용한 다음 그 위에 불투명도 변경 전환을 만듭니다.

으아악 으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！