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 có phạm vi và background-clip

Jhey Tompkins

Chuyển đến CodePen và 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" (Nhanh):

<h1 class="boujee-text">Hello!</h1>

Sau đó, hãy tạo background-color đậm hơn cho body:

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

Tăng font-size trên văn bản của chúng ta. Sử dụng clamp để tạo thành phần hiển thị 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á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 theo chiều 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 cho 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 sử 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 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 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;
}

Để thực hiện việc này hiệu quả 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 với CSS bằng cách sử dụng các thuộc tính tuỳ chỉnh có phạm vi và background-clip.

Sau đây là mẹo này dưới dạng video nhanh! ⚡️

Bạn muốn xem thông tin này ở dạng tweet? 🐦

Chúc bạn luôn vui vẻ! ʕ •ᴥ•ʔ

Hình ảnh chính của Vladislav Klapin trên Unsplash