Mẹo CSS nhanh chóng! Văn bản chuyển màu động

Hãy tạo hiệu ứng văn bản có chuyển màu động bằng các thuộc tính tuỳ chỉnh có phạm vi và background-clip

Jhey Tompkins

Chuyển sang CodePen rồi tạo một bút mới.

Tạo mã đánh dấu cho văn bản. Hãy sử dụng tiêu đề có từ "Speedy":

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

Sau đó, hãy cho body một background-color tối hơn:

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

Tăng font-size cho văn bản của chúng ta. Sử dụng clamp để tạo thành phần thích ứng:

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

Tạo 2 thuộc tính tuỳ chỉnh cho các màu mà chúng ta sẽ sử dụng. Áp dụng linear-gradient cho background bằng cách sử dụng những màu đó và xoay 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%;
}

Tạo một thuộc tính tuỳ chỉnh mà bạn có thể dùng cho kích thước nền ngang. Sử dụng cho 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%;
}

Để cắt nền theo văn bản, hãy đặt color thành transparent và đặt 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;
}

Tại thời điểm này, bạn có thể giữ nguyên và thử nghiệm với background-position và độ dốc được dùng trong background-image. Hoặc bạn có thể tạo hiệu ứng chuyển động cho dải chuyển màu trên văn bản. Trước tiên, hãy xác định một khung hình chính cho ảnh động. Thao tác này sẽ sử dụng thuộc tính tuỳ chỉnh --bg-size mà bạn đã xác định trước đó. Một ví dụ điển hình về các thuộc tính tuỳ chỉnh có phạm vi giúp bạn dễ dàng duy trì hơn.

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

Sau đó, áp dụng ảnh động bằng cách sử dụng 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;
}

Để đi xa hơn, bạn có thể bao bọc mã ảnh động trong một truy vấn nội dung nghe nhìn để tôn trọng lựa chọn ưu tiên của người dùng về chuyển động:

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

Xong! 🎉 Bạn đã tạo một số văn bản có hiệu ứng chuyển màu bằng CSS bằng cách sử dụng các thuộc tính tuỳ chỉnh có phạm vi và background-clip.

Bạn có thể xem mẹo này dưới dạng video ngắn! ⚡️

Bạn muốn xem thông tin này dưới dạng tweet không? 🐦

Hãy luôn tuyệt vời!