เคล็ดลับ CSS อย่างรวดเร็ว ข้อความไล่ระดับสีแบบเคลื่อนไหว

มาสร้างเอฟเฟกต์ข้อความไล่ระดับสีแบบเคลื่อนไหวด้วยคุณสมบัติที่กำหนดเองที่กำหนดขอบเขตและ background-clip กัน

Jhey Tompkins

ไปที่ CodePen แล้วสร้าง Pen ใหม่

สร้างมาร์กอัปสำหรับข้อความ ลองใช้ส่วนหัวที่มีคำว่า "รวดเร็ว" ดังนี้

<h1 class="boujee->text&q<uot>;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-clip ต้องมีคำนำหน้าในบางเบราว์เซอร์เป็น -webkit-background-clip

ในขั้นตอนนี้ คุณสามารถปล่อยไว้แบบนั้นและทดลองใช้ 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 Query เพื่อให้สอดคล้องกับค่ากำหนดของผู้ใช้สำหรับการเคลื่อนไหว ดังนี้

@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

มาดูเคล็ดลับนี้ในรูปแบบวิดีโอสั้นๆ กัน ⚡️

หากต้องการอ่านข้อมูลนี้ในรูปแบบทวีต 🐦

ขอให้สุดยอดตลอดไป