เทมเพลตข้อความ CSS แบบกระพริบ: เน้นด้วย animation: blink

📝 การใช้งาน

เทมเพลตนี้ใช้เพื่อสร้างการแอนิเมชันข้อความกระพริบ

📘 คำอธิบาย

โค้ดนี้ใช้ `animation: blink` และ `@keyframes` เพื่อทำให้ข้อความกระพริบในช่วงเวลา 1 วินาที

🔹 โค้ดบางส่วน

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>

💻 โค้ดทั้งหมดที่สามารถทำงานได้

<div class="blink-text">
  ข้อความนี้กำลังทำการกระพริบ
</div>

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>

คัดลอกแล้ว!

✨ เทคนิคการใช้งานแอนิเมชันแบบกระพริบอย่างมีประสิทธิภาพ

กำลังมีโปรโมชันด่วนแบบฉุกเฉิน!

ขอขอบคุณที่ลูกค้าทุกท่านไว้วางใจเลือกใช้บริการของเราเสมอมา

เพื่อเป็นการขอบคุณ เราขอจัดโปรโมชั่นพิเศษแบบจำกัดเวลาในวันนี้เท่านั้น! ห้ามพลาดโอกาสที่จะได้สินค้ายอดนิยมในราคาสุดพิเศษ!

สินค้าที่ร่วมรายการ

หูฟังไร้สายประสิทธิภาพสูง

¥12,000 → ¥7,200 (ลด 40%)
หุ่นยนต์ดูดฝุ่นอัตโนมัติ R-500

¥35,000 → ¥24,500 (ลด 30%)
ผ้าขนหนูออร์แกนิกคอตตอน ขนาดใหญ่ 3 ผืน

¥5,000 → ¥3,000 (ลด 40%)

โปรโมชั่นสิ้นสุดวันนี้เวลา 23:59 น.!
สินค้าจำนวนจำกัด และอาจสิ้นสุดโดยไม่แจ้งล่วงหน้า

นี่คือตัวอย่างของการใช้ข้อความประเภท “ตรวจสอบตอนนี้เลย!”

แอนิเมชันแบบกระพริบเหมาะสำหรับการดึงดูดความสนใจของผู้ใช้ไปยังองค์ประกอบที่สำคัญ โดยสามารถปรับค่าพารามิเตอร์ของ animation: blink เพื่อสร้างรูปแบบต่างๆ ได้ เช่น animation: blink 0.5s infinite; จะทำให้กระพริบเร็วขึ้น

🌈 แอนิเมชันเปลี่ยนสี

หากต้องการเปลี่ยนทั้งความโปร่งใสและสี ให้เขียนแบบนี้ @keyframes blink { 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: blue; } 100% { opacity: 1; color: red; } } การเปลี่ยนสีพร้อมกระพริบจะช่วยเพิ่มความโดดเด่นให้กับข้อความ

⏱ การควบคุมเวลา

การเปลี่ยนฟังก์ชันเวลาแอนิเมชันจะทำให้การเคลื่อนไหวหลากหลายมากขึ้น เช่น animation-timing-function: ease-in-out; จะทำให้การเปลี่ยนแปลงนุ่มนวลขึ้น และสามารถใช้ animation-delay: 1s; เพื่อหน่วงเวลาการเริ่มต้นแอนิเมชัน

ควรระวังการใช้แอนิเมชันกระพริบมากเกินไป เพราะอาจส่งผลต่อผู้ใช้ที่มีปัญหาทางการมองเห็นหรือรู้สึกเวียนหัว มาตรฐาน WCAG แนะนำให้หลีกเลี่ยงการกระพริบมากกว่า 3 ครั้งต่อวินาที ใช้เฉพาะในกรณีที่จำเป็น เช่น ข้อความเตือนสำคัญ

เทคนิคนี้เหมาะสำหรับการแสดงการแจ้งเตือนด่วน เคาน์ดาวน์โปรโมชันแบบจำกัดเวลา หรือการเน้นช่องกรอกข้อมูลที่จำเป็น หากใช้ในปริมาณที่เหมาะสม จะช่วยเพิ่มประสบการณ์การใช้งานเว็บไซต์ได้เป็นอย่างดี