มาสร้างเอฟเฟกต์ข้อความแบบไล่ระดับสีที่เคลื่อนไหวด้วยคุณสมบัติที่กำหนดเองและคลิปพื้นหลังกัน
ไปที่ CodePen แล้วสร้างปากกาใหม่
สร้างมาร์กอัปสำหรับข้อความ เราจะใช้ส่วนหัวที่มีคำว่า "Speedy":
<h1 class="boujee-text">Hello!</h1>
จากนั้นลองปรับ body
ให้มืดลง background-color
:
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
แสดง font-size
ในข้อความของเรา ใช้ clamp
เพื่อทำให้ปรับเปลี่ยนตามอุปกรณ์
.boujee-text {
font-size: clamp(3rem, 25vmin, 8rem);
}
สร้างพร็อพเพอร์ตี้ที่กำหนดเอง 2 รายการสำหรับสีที่เราจะใช้ ใช้ linear-gradient
กับ 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%;
}
สร้างพร็อพเพอร์ตี้ที่กำหนดเองซึ่งคุณใช้สำหรับขนาดพื้นหลังแนวนอนได้ ใช้กับ 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%;
}
หากต้องการตัดพื้นหลังกับข้อความ ให้ตั้งค่า color
เป็น transparent
และตั้งค่า 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;
}
เมื่อถึงจุดนี้ ให้ปล่อยไว้เช่นนั้นและทดลองกับ background-position
และการไล่ระดับสีที่ใช้ใน background-image
หรือคุณอาจทำให้การไล่ระดับสีนั้นเคลื่อนไหวกับข้อความก็ได้ ก่อนอื่น ให้กำหนดคีย์เฟรมของภาพเคลื่อนไหว การดำเนินการนี้จะใช้พร็อพเพอร์ตี้ที่กำหนดเอง --bg-size
ที่คุณกำหนดไว้ก่อนหน้านี้ ตัวอย่างที่ดีของพร็อพเพอร์ตี้ที่กำหนดเองที่มีขอบเขตซึ่งช่วยให้การบำรุงรักษาง่ายขึ้น
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
จากนั้นใช้ภาพเคลื่อนไหวโดยใช้ 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;
}
หากต้องการดำเนินการเพิ่มเติม คุณสามารถรวมโค้ดภาพเคลื่อนไหวไว้ในคำค้นหาสื่อเพื่อให้เป็นไปตามค่ากำหนดสำหรับการเคลื่อนไหวของผู้ใช้ ดังนี้
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
เสร็จแล้ว 🎉 คุณได้สร้างข้อความแบบไล่ระดับสีแบบเคลื่อนไหวด้วย CSS โดยใช้คุณสมบัติที่กำหนดเองที่กำหนดขอบเขตและ background-clip
ลองดูเคล็ดลับต่อไปนี้ในรูปแบบวิดีโอโหลดเร็ว ⚡️
ชอบข้อความนี้ในแบบฟอร์มทวีตใช่ไหม 🐦
เจ๋งสุดๆ ตลอดเลย! ` •ᴥ• SSO
รูปภาพหลักโดย Vladislav Klapin ใน Unsplash