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
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