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à kẹp nền

Jhey Tompkins

Chuyển đến CodePen và tạo một cây bút mới.

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

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

Sau đó, hãy cung cấp cho body của chúng ta một background-color tối hơn:

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

Chuyển font-size trên văn bản của chúng ta. Sử dụng clamp để làm cho trang web thích ứng:

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

Tạo hai thuộc tính tuỳ chỉnh cho màu 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 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 phần nền thành 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ăn bản đó và thử nghiệm với background-position cũng như độ dốc được sử dụng trong background-image. Hoặc bạn có thể tạo chuyển động chuyển màu trên 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ẽ 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ề tài sản tuỳ chỉnh theo phạm vi giúp bạn bảo trì dễ dàng 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ếp tục phát triển hơn nữa, bạn có thể bao bọc mã ảnh động trong một truy vấn nội dung đa phương tiện để tuân theo các 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ác thuộc tính tuỳ chỉnh có phạm vi và background-clip.

Dưới đây là mẹo hay ở dạng video tốc độ cao! ⚡️

Bạn muốn nhận nội dung này ở biểu mẫu đăng trên Twitter? 🐦

Hãy giữ tuyệt vời! е •ᴥ• {/0}

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