CSS에서 쉬운 방법으로 애니메이션 그래디언트를 만드는 방법.

그라데이션은 시작점과 끝점이 있는 색상의 연속이며 선형 그라데이션은 다른 색상으로 점차 직선으로 이동합니다.

그라디언트의 애니메이션은 요즘 최신 트렌드이며 대부분의 웹 사이트는 그라디언트를 사용하여 디자인됩니다. background-clip 속성과 CSS의 애니메이션을 사용하면 애니메이션 텍스트 그래디언트를 구현하기가 매우 쉽습니다.

구문: 애니메이션 텍스트 그라데이션을 만드는 방법
먼저 h1 또는 원하는 태그를 사용하여 글꼴을 설정하고 원하는 위치에 배치해야 합니다. flexbox를 사용하여 글꼴을 중앙에 배치했습니다.



의 도움으로 결과를 얻을 수 있습니다.

선형 그라데이션()

배경 클립

텍스트 채우기 색상

애니메이션

1.Linear-gradient() 속성:
위에서 설명한 것처럼 이 속성은 텍스트 블록에 배경 선형 그래디언트를 만듭니다.
CSS에서 선형 그라데이션은 다음을 사용하여 구현됩니다.

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

결과는 다음과 같습니다.



2.background-clip() 속성:
이 CSS 속성은 요소의 배경이 테두리 상자, 패딩 상자 또는 콘텐츠 상자 아래로 확장되는지 여부를 설정합니다.

background-clip: text;

이 속성을 적용한 후 텍스트는 다음과 같이 표시됩니다.



배경은 전경 텍스트 내에서 칠해집니다(클리핑).
텍스트 색상으로 인해 선형 그래디언트 색상을 볼 수 없으며 세 번째 속성을 사용하게 됩니다.

3. 텍스트 채우기 색상 속성:
전경 텍스트에 잘린 선형 그라데이션을 보고 싶기 때문에 텍스트의 색상을 투명하게 만들어야 하며 결과는 다음과 같습니다.



이제 원하는 결과를 얻기 위해 몇 가지 애니메이션을 넣어 보겠습니다.
이를 위해 그라디언트의 배경 크기를 늘려 애니메이션을 만들 때 효과를 명확하게 볼 수 있습니다.

background-size:300%;

이제 CSS 애니메이션을 추가해 보겠습니다.

animation: bg-animations 2s infinite alternate;

여기서 bg-animation은 애니메이션에 사용할 키프레임의 이름입니다. 원하는 대로 이름을 지정할 수 있습니다.

이제 아래와 같이 키프레임 애니메이션을 생성합니다.

@keyframes bg-animations{
  0%{
    background-postion:left;
  }
  100%{
    background-position:right;
  }
}

이제 끝났습니다. 그라데이션 애니메이션을 볼 수 있습니다.



View Full Code in Codepen: