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

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

<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 วินาที ทำซ้ำไม่สิ้นสุด */

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

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

.marquee-container {

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

}

</style>

<div class="marquee-container">

    <marquee direction="right">

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

    </marquee>

</div> 

ครั้งที่ 1