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 chuyển màu động đó bằng các thuộc tính tuỳ chỉnh trong phạm vi và background-clip

Jhey Tompkins

Chuyển sang CodePen và tạo một pen 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 đặt background-color tối hơn cho body:

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

Tăng font-size cho văn bản. Sử dụng clamp để làm cho thành phần này thích ứng:

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

Tạo hai thuộc tính tuỳ chỉnh cho màu sắc mà chúng ta sẽ sử dụng. Áp dụng linear-gradient cho background bằng cách sử dụng các màu đó và xoay 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ể sử 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ể để nguyên và thử nghiệm với background-position và dải chuyển màu được dùng trong background-image. Hoặc bạn có thể tạo hiệu ứng chuyển màu cho văn bản. Trước tiên, hãy xác định 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 trong phạm vi giúp bạn dễ dàng bảo trì hơn.

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

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

Để tiến xa hơn, bạn có thể gói mã ảnh động trong một truy vấn đa phương tiệ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 chuyển màu động bằng CSS bằng cách sử dụng các thuộc tính tuỳ chỉnh trong phạm vi và background-clip.

Sau đây là video ngắn gọn về mẹo này! ⚡️

Bạn muốn xem nội dung này ở dạng bài đăng trên Twitter? 🐦

Chúc bạn luôn tuyệt vời!