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

범위가 지정된 맞춤 속성과 배경 클립으로 애니메이션 그라데이션 텍스트 효과를 만들어 보겠습니다.

Jhey Tompkins

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

텍스트의 마크업을 만듭니다. '빠른'이라는 단어가 포함된 제목을 사용해 보겠습니다.

<h1 class="boujee-text">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로 애니메이션 그라데이션 텍스트를 만들었습니다.

이 팁을 빠르게 확인할 수 있는 동영상을 준비했습니다. ⚡️

트윗 형식으로 확인하고 싶으신가요? 🐦

좋은 하루 보내세요! ʕ •ᴥ•ʔ

Unsplash의 블라디슬라프 클라핀 히어로 이미지