외부 라이브러리를 사용하지 않고 CSS에서 부드러운 그라데이션 배경 애니메이션을 어떻게 만들 수 있습니까?-CSS 튜토리얼-php.cn

외부 라이브러리를 사용하지 않고 CSS에서 부드러운 그라데이션 배경 애니메이션을 어떻게 만들 수 있습니까?

Patricia Arquette

풀어 주다： 2024-12-14 02:34:12

원래의

634명이 탐색했습니다.

How Can I Create Smooth Gradient Background Animations in CSS Without Using External Libraries?

CSS를 사용하여 그라데이션 배경을 부드럽게 애니메이션

끊김없는 그라데이션 애니메이션에서 원활하게 전환되지 않고 갑자기 변경되는 문제가 발생하는 경우 이 문서를 참조하세요. 다음과 같은 외부 라이브러리에 의존하지 않고 솔루션을 제공합니다. jQuery.

애니메이션 과제

그라디언트 애니메이션을 처리할 때 여러 색상 간의 부드러운 전환을 달성하는 것이 어려울 수 있습니다. 기본 애니메이션 동작은 종종 갑작스럽기 때문에 그라데이션이 한 위치에서 다른 위치로 점프하게 됩니다.

선형 그라데이션 배경

부드러운 그라데이션 애니메이션을 만들기 위해 다음을 사용합니다. 선형 그라데이션 배경을 사용하고 CSS 애니메이션을 사용하여 배경 위치를 이동합니다. CSS 스타일은 다음과 같습니다.

#gradient {
  /* Gradient background properties */
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(
    130deg,
    #ff7e00,
    #ffffff,
    #5cff00
  );
  background-size: 200% 200%;

  /* Animation properties */
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

로그인 후 복사

HTML 구현

HTML에서 div 요소를 생성하고 "gradient" 클래스를 적용해야 합니다. :