CSS로 텍스트 그라데이션 애니메이션

CSS로 텍스트에 강력한 기능을 제공합니다.

모든 웹사이트는 그들이 무엇에 관한 것인지에 대한 글을 포함해야 합니다. 웹사이트를 만들 때 프런트엔드 개발자는 CSS로 매력적인 모양을 제공하기 위해 텍스트를 수정해야 합니다.

CSS로 텍스트 그라데이션 애니메이션

그라디언트는 점진적 전환을 통해 두 개 이상의 색상을 함께 결합하는 방법입니다.

등비의 예,



점진적 전환(그라디언트)의 예

텍스트 그라데이션 애니메이션 단계

나. 원하는 선택기에 배경 속성을 추가하고 사용할 그라데이션 유형을 결정합니다.
그래디언트 유형과 그 예를 볼 수 있습니다here. 이 문서에서는 linear-gradient라는 배경 속성을 사용합니다.
작업할 두 개 이상의 색상을 선택하고 추가합니다.
결과 코드는 다음과 같아야 합니다.
.selector{
background: linear-gradient(#6bc5f8, #cf59e6);
}
선형 그래디언트를 사용하면 색상이 전환되는 방향을 지정할 수 있습니다.
예를 들어 위, 아래, 오른쪽 위, 왼쪽 위, 왼쪽 아래
방향을 각도로 지정할 수도 있습니다.

형식은 다음과 같습니다..selector{
background: linear-gradient((DIRECTION), (Color1), (Color2), ... (Color-n))
}이 기사에서는 방향을 각도로 지정합니다.
결과 코드는
.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
}
ii. CSS 배경 클립 추가: text; 및 배경 크기: 400% 400%; 당신의 선택자에게. 이 속성은 배경이 덮는 텍스트의 모양을 취하도록 배경에 지시합니다.
이 CSS 속성은 모든 브라우저에서 허용되지 않으므로 대부분의 브라우저에서 제대로 작동하려면 다른 속성을 추가해야 합니다.

결과 코드는 다시 한 번 다음과 같습니다.

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
background size: 400% 400%;
-webkit-background-clip: text;
}

iii. 위의 단계를 통해 텍스트 그라데이션을 성공적으로 만들었습니다. 텍스트 색상이 그래디언트에 영향을 미치지 않도록 선택기에 색상 속성을 추가하기만 하면 됩니다. -webkit-text-fill-color: transparent를 추가하여 그렇게 할 수 있습니다. 당신의 코드에.
이는 다음을 제공합니다.

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

이것으로 CSS로 텍스트 그래디언트를 성공적으로 만들었습니다.
텍스트 그래디언트는 CSS로 애니메이션화할 수 없다는 것을 알아야 합니다. 따라서 애니메이션화하려면 약간의 트릭을 추가해야 합니다(안 됩니다. css-tricks.com에 있습니다).

텍스트 그라데이션 애니메이션.

단계:
나. CSS의 모든 애니메이션과 마찬가지로 애니메이션 이름, animation-duration, animatio-iteration-count(이는 애니메이션이 실행될 횟수를 결정하는 속성입니다. 우리는 코드를 작성하고 있습니다. 텍스트 그라데이션의 경우 애니메이션이 무한히 실행되어야 합니다.), animation-timing-function

결과 코드는

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: textGradient;
animation-duration: 2s,
animation-iteration-count: infinite;
animation-timing-function: ease;
}

2단계.

계속해서 키프레임을 생성합니다(모르는 경우를 대비하여 키프레임은 CSS에서 애니메이션을 작성하는 방법입니다. 여기에 대해 읽을 수 있는 Link이 있습니다)

여기서부터 잘 읽어보세요.
텍스트 그래디언트를 성공적으로 애니메이션화하는 요령은 배경 위치를 변경하는 것입니다.
이 CSS 속성은 각 배경의 초기 위치를 설정합니다. 위치는 레이어를 기준으로 합니다.
배경 속성에 대해 읽어보기here

이것이 키프레임 애니메이션의 최종 코드가 됩니다.

@keyframes Textgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

이 코드를 설명하면
0%{
background-position: 0% 50%
}
이것은 animation-duration 속성과 관련이 있습니다. 0% of 2s 즉, 애니메이션이 시작되는 0%에서 background-position을 0%로 설정 50%
50% {
background-position: 100% 50%;
}
50% 즉 애니메이션의 1s인 2s의 50%에서 background-position을 100%로 설정 50%
100% {
background-position: 0% 50%;
}
이것은 100% 즉 애니메이션의 끝인 2s의 100%에서 background-position을 0% 50%로 설정한다는 것을 의미합니다.

이것으로 텍스트 그래디언트에 성공적으로 애니메이션을 적용했습니다.

궁금한 사항은 댓글로 남겨주시면 최대한 답변해드리겠습니다.