빠른 팁 : CSS의 텍스트 그라디언트 및 패턴을 애니메이션하는 방법

이 빠른 팁에서는 CSS로 배경 기울기를 애니메이션하는 것이 얼마나 쉬운 지 보여줍니다.

최근 기사에서, 우리는 텍스트에 백그라운드 그라디언트를 설정하는 방법을 보여주었습니다. 아래 코드 펜 데모는 결과를 보여줍니다

펜

를 참조하십시오 sitepoint (@sitepoint) 에 의해 왼쪽에서 오른쪽으로 그라디언트가있는 텍스트 Codepen에서.

아래 의이 예를 바탕 으로이 결과에 어떻게 도달했는지 잘 모르면 해당 기사를 읽어야합니다. 이 데모를 위해 그라디언트 배경에 추가 색상을 추가해 봅시다 :
.
우리가 배경 클립을 끄면 : 텍스트와 텍스트 색상 : 잠시 투명하게, 우리는 그라디언트가 텍스트의 내용 상자를 채우는 방법을 더 잘 이해합니다.

펜

를 참조하십시오 애니메이션 배경 그라디언트가있는 텍스트 : 1 witepoint (@sitepoint) Codepen에서.

이제 백그라운드 그라디언트를 애니메이션하는 단계를 살펴 보겠습니다.

1 단계 : 배경 크기 조정 우리의 그라디언트 배경을 애니메이션을 만들려면 텍스트의 컨텐츠 상자보다 더 크게 만들어서 한 번에 모든 것을 볼 수 없습니다. 우리는 편리한 배경 크기의 속성으로 그렇게 할 수 있습니다. (여기에서 배경 크기에 관한 모든 것을 읽을 수 있습니다.)

배경 그라디언트의 너비를 제목 요소의 너비의 3 배로 설정하려고합니다.

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

이제 그라디언트 배경의 3 분의 1만이 아래에서 볼 수 있듯이 한 번에 보일 것입니다.

펜

를 참조하십시오 애니메이션 배경 그라디언트가있는 텍스트 : SitePoint (@SitePoint)의 2 단계

Codepen에서.

2 단계 : 애니메이션 설정 다음으로, 우리는 시간이 지남에 따라 다른 부분을 볼 수 있도록 배경을 움직일 애니메이션을 설정합니다. 우리는 그렇게 간단한 애니메이션 규칙을 설정할 수 있습니다.

16 초마다 배경을 앞뒤로 움직일 것입니다.

다음 다음, @keyframes 문을 설정합니다

이 간단한 @keyframes 문은 8 초마다 배경을 왼쪽 상단에서 오른쪽으로 이동합니다. 아래 펜에서 다시 한 번 비활성화 된 배경 클립 : 텍스트와 색상 : 투명하여 백그라운드에서 무슨 일이 일어나고 있는지 알 수 있습니다.

펜

를 참조하십시오 애니메이션 배경 그라디언트가있는 텍스트 : SitePoint (@SitePoint)의 3 단계

Codepen에서.

일단 배경 클립을 다시 활성화하면 : 텍스트와 색상 : 투명하게, 완성 된 제품이 보입니다.

펜

를 참조하십시오 애니메이션 배경 그라디언트가있는 텍스트 : SitePoint (@SitePoint)의 4 단계 (최종) Codepen에서.

꽤 멋져요!
배경 이미지를 애니메이션 텍스트에 그라디언트 효과와 패턴 추가에 관한 기사에서 꽃 배경 이미지도 사용했습니다. (여기서 펜을 참조하십시오.)
그 배경에도 애니메이션을하자. 배경 이미지를 왜곡하고 싶지 않기 때문에 약간 다르게 할 것입니다.

배경 크기를 제거하자 : 원래 데모에서 포함하고 배경 크기를 전혀 설정하지 마십시오. 그것은 우리에게 이것을 남겨 둡니다 :

결과는 아래 코드 펜 데모에 나와 있습니다.

펜

를 참조하십시오 sitepoint (@sitepoint) 에 의해 텍스트에서 배경 이미지를 애니메이션합니다 Codepen에서.

배경 클립을 끄십시오 : 텍스트와 텍스트 색상 : 배경에서 무슨 일이 일어나고 있는지보고 싶다면 잠시 투명합니다. 우리의 배경 이미지는 기본적으로 반복되며,이 특정 이미지에는 그리 나쁘지 않습니다. (관심이없는 경우, 배경 반복 : 반복적 인 배경없이 어떤 일이 일어나는지 확인하기 위해 반복되지 않음을 추가하십시오.) 다른 상황에서는 배경 이미지가 잘 타일이 좋지 않은 곳에서 이미지가 반복되지 않고 방지하고 싶을 수 있습니다. 그런 다음 배경 크기를 사용하여 위의 그라디언트 배경에서와 같이 이미지를 더 크게 만듭니다. 예를 들면 :

다음은 꽃 데모에 미치는 영향입니다.

펜
를 참조하십시오 텍스트에서 배경 이미지 애니메이션 : sitepoint (@sitepoint)의 step1a (배경 크기 실험) Codepen에서.

결론 우리는 이것을 훨씬 더 화려한 애니메이션을 할 수 있었지만 목표는 여기에서 간단하게 유지하는 것이 었습니다. CSS 애니메이션을 시작하는 방법에서 CSS 키 프레임과 애니메이션을 더 깊이 파고들 수 있습니다. 애니메이션 타이밍, 그라디언트의 각도 등으로 플레이 할 수도 있습니다. 이전 기사에서 언급했듯이, 이것에 대해 재미있게 보내십시오. 그러나 이런 종류의 애니메이션을 너무 많이 짜증나게 할 수 있기 때문에 배 밖으로 나가지 마십시오. 제목에 미묘한 애니메이션 배경은 잠재 고객을 참여시키는 데 필요한 관심이나 음모를 더할 수 있습니다.

위 내용은 빠른 팁 : CSS의 텍스트 그라디언트 및 패턴을 애니메이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!