CSS3에서 배경 이미지에 동적 색상 변경 효과를 추가하는 방법

이전 글 "CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기"에서 멋진 삼각형 배경 이미지를 만드는 방법을 소개해드렸는데요, 관심 있는 친구들은 배워보세요~

그리고 다음 글에서는 소개해드릴게요. 멋진 배경 이미지를 만드는 방법에 대해 설명하고 CSS3를 사용하여 색상이 변하는 배경 이미지 애니메이션을 만들어 웹 페이지를 더욱 매력적으로 만드는 방법을 보여줍니다!

먼저 렌더링을 살펴보겠습니다

이 효과를 얻는 방법을 연구해 보겠습니다.

먼저 태그를 만들지 않고 배경 이미지를 body 태그에 직접 설정합니다

body {
   background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

사진의 색상을 변경하는 것은 어떻습니까? 이를 위해서는 배경 이미지에 오버레이로 색상 레이어를 추가해야 합니다. 이는 선형 그라데이션() 함수를 사용하여 달성할 수 있습니다.

background-image: 
           linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
   url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");

현재로서는 동적 효과를 달성하는 방법입니다. 끊임없이 변화하는 색상의 효과? @keyframes 및 애니메이션 속성을 사용하여 달성할 수 있습니다 - 애니메이션 효과 추가:

• 애니메이션 속성을 사용하여 애니메이션 이름, 재생 시간, 재생 시간 등을 설정합니다.:
  

body {
  background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

animation-name: 지정 바인딩 선택기의 키프레임 이름

animation-duration: 애니메이션은 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

animation-timing-function: 애니메이션이 주기를 완료하는 방법을 설정합니다.

animation-delay: 애니메이션이 시작되기 전의 지연 간격입니다.

animation-iteration-count: 애니메이션이 재생되는 횟수를 정의합니다.

animation-direction: 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

animation-fill-mode: 애니메이션이 재생되지 않을 때(애니메이션이 완료될 때 또는 애니메이션 재생이 시작되기 전에 지연이 있을 때) 요소에 적용할 스타일을 지정합니다.

animation-play-state: 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.

• @keyframes를 사용하여 애니메이션의 각 프레임을 정의하세요.

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), 
		url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
		 url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
}

전체 코드는 다음과 같습니다.

PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있으므로 누구나 학습할 수 있습니다. " CSS 비디오 튜토리얼" !

위 내용은 CSS3에서 배경 이미지에 동적 색상 변경 효과를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!