การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS text-shadow

ตัวอย่างการสร้างแอนิเมชันเปลี่ยนเงาของข้อความ (text-shadow) เพื่อสร้างเอฟเฟกต์ glowing, floating, หรือ 3D

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      height: 200px;
      background-color: orange;
      border: 2px solid blue;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      30% {
        text-shadow: 10px 20px 30px blue;
      }
    }
  </style>
</head>
<body>
  <h1>CSS text-shadow property</h1>
  <div>
    This is demo text. This is demo text. This is demo text. This is demo text. 
    This is demo text. This is demo text. This is demo text. This is demo text. 
    This is demo text. This is demo text.
  </div>
</body>
</html>

คำอธิบาย: เริ่มต้นไม่มี text-shadow ที่ 30% จะมีเงา: เลื่อนขวา 10px, ลง 20px, blur 30px สีน้ำเงิน

รูปแบบ text-shadow: h-shadow v-shadow blur-radius color (blur และ color เป็น optional)

การประยุกต์: สร้างเอฟเฟกต์ glowing text (หลายเงา), 3D text, neon sign, floating text

ตัวอย่างหลายเงา: text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de; (neon pink glow)

ประสิทธิภาพ: text-shadow animate ได้ราบร่อน (cheap) ไม่กระทบ layout