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

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

Jhey Tompkins

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

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

<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);
}

사용할 색상에 두 개의 맞춤 속성을 만듭니다. 이러한 색상을 사용하여 linear-gradient를 background에 적용하고 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-image에 사용된 background-position 및 그라데이션을 실험해 볼 수 있습니다. 또는 텍스트의 그라데이션에 애니메이션을 적용할 수 있습니다. 먼저 애니메이션의 키프레임을 정의합니다. 앞에서 정의한 --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로 애니메이션 그라데이션 텍스트를 만들었습니다.

간단한 동영상으로 이러한 팁을 알려 드리겠습니다. ⚡️

트윗 양식에서 선호하시나요? 🐦

멋지게 꾸미지 마세요! •ᴥ•`

히어로 이미지: Vladislav Klapin, Unsplash