แหล่งเรียนรู้

promp : จากโค้ดดังกล่างข้างต้น แก้ไข ให้ตัวหนังสือกระพริบ มีแสง

<style>

/* 1. กำหนด animation สำหรับการกระพริบ */

@keyframes blink {

    0% { opacity: 1; }  /* เริ่มต้น - มองเห็นได้ 100% */

    50% { opacity: 0; } /* กลางทาง - หายไป 0% */

    100% { opacity: 1; } /* สิ้นสุด - มองเห็นได้ 100% */

}

/* 2. Style สำหรับข้อความที่ต้องการ */

.glowing-text {

    color: #FF69B4; /* สีตัวอักษร: ชมพู */

    font-size: 40px;

    /* เอฟเฟกต์การกระพริบ */

    animation: blink 1s steps(1, end) infinite; /* ใช้ animation 'blink' เป็นเวลา 1 วินาที ทำซ้ำไม่สิ้นสุด */

    /* เอฟเฟกต์แสงเรืองแสง (Text Shadow) */

    text-shadow:

        0 0 5px #fff,    /* เงาเล็กๆ สีขาว */

        0 0 10px #FFC0CB, /* เงากลาง สีชมพูอ่อน */

        0 0 20px #FF69B4, /* เงาใหญ่ สีชมพู */

        0 0 30px #FF1493; /* เงาที่ใหญ่ที่สุด สีชมพูเข้ม */

}

/* 3. หากยังต้องการให้ข้อความเลื่อน ใช้ marquee เหมือนเดิม แต่เพิ่ม class */

/* หมายเหตุ: <marquee> เป็นแท็กที่เลิกใช้แล้ว (deprecated) แต่ในตัวอย่างนี้ยังคงใช้ร่วมกันได้ */

.marquee-container {

    /* ใช้สำหรับกำหนดสีพื้นหลังถ้าต้องการ หรือกรอบ */

}

</style>

<div class="marquee-container">

    <marquee direction="right">

        <span class="glowing-text">โปรแกรมวิชาการประถมศึกษา</span>

    </marquee>

</div>