신속한 CSS 팁 애니메이션 그라데이션 텍스트

범위 지정 맞춤 속성 및 background-clip을 사용하여 애니메이션 그래디언트 텍스트 효과를 만들어 보겠습니다.

Jhey Tompkins

CodePen으로 이동하여 새 펜을 만듭니다.

텍스트의 마크업을 만듭니다. 'Speedy'라는 단어가 포함된 헤더를 사용해 보겠습니다.

<h1 class="boujee->text&q<uot>;Hello!/h1

그런 다음 body에 더 어두운 background-color를 지정해 보겠습니다.

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

텍스트의 font-size를 늘립니다. clamp를 사용하여 반응형으로 만듭니다.

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

사용할 색상의 맞춤 속성을 두 개 만듭니다. 이러한 색상을 사용하여 background에 linear-gradient를 적용하고 90도 회전합니다.

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

가로 배경 크기에 사용할 수 있는 맞춤 속성을 만듭니다. background-size-x에 사용합니다.

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

배경을 텍스트로 클리핑하려면 color를 transparent로 설정하고 background-clip: text를 설정합니다.

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

이 시점에서 그대로 두고 background-position 및 background-image에 사용된 그래디언트를 실험해 볼 수 있습니다. 또는 텍스트 전체에 그래디언트를 애니메이션 처리할 수 있습니다. 먼저 애니메이션의 키프레임을 정의합니다. 이렇게 하면 이전에 정의한 --bg-size 맞춤 속성이 사용됩니다. 범위 지정 맞춤 속성을 사용하면 유지보수가 더 쉬워지는 좋은 예입니다.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

그런 다음 animation을 사용하여 애니메이션을 적용합니다.

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

더 나아가 애니메이션 코드를 미디어 쿼리로 래핑하여 동작에 대한 사용자 환경설정을 준수할 수 있습니다.

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

완료 🎉 범위 지정 맞춤 속성 및 background-clip을 사용하여 CSS로 애니메이션 그래디언트 텍스트를 만들었습니다.

이 팁을 빠른 동영상 형식으로 확인해 보세요. ⚡️

트윗 형식으로 선호하시나요? 🐦

멋진 상태를 유지하세요.