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

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

<style>

    /* CSS สำหรับการกระพริบ */

    @keyframes blink {

        0% { opacity: 1.0; }

        50% { opacity: 0.0; }

        100% { opacity: 1.0; }

    }

    .blinking-char {

        /* ใช้ animation ชื่อ 'blink' โดยใช้เวลา 0.8 วินาที และทำซ้ำไม่สิ้นสุด */

        animation: blink 0.8s infinite;

    }

</style>

<marquee direction="right" scrollamount="6" scrolldelay="60" style="font-size: 40px;">

    <span class="blinking-char" style="color: #FF0000; animation-delay: 0s;">โ</span>

    <span class="blinking-char" style="color: #FF7F00; animation-delay: 0.05s;">ป</span>

    <span class="blinking-char" style="color: #FFFF00; animation-delay: 0.1s;">ร</span>

    <span class="blinking-char" style="color: #7FFF00; animation-delay: 0.15s;">แ</span>

    <span class="blinking-char" style="color: #00FF00; animation-delay: 0.2s;">ก</span>

    <span class="blinking-char" style="color: #00FF7F; animation-delay: 0.25s;">ร</span>

    <span class="blinking-char" style="color: #00FFFF; animation-delay: 0.3s;">ม</span>

    <span class="blinking-char" style="color: #007FFF; animation-delay: 0.35s;">วิ</span>

    <span class="blinking-char" style="color: #0000FF; animation-delay: 0.4s;">ช</span>

    <span class="blinking-char" style="color: #7F00FF; animation-delay: 0.45s;">า</span>

    <span class="blinking-char" style="color: #FF00FF; animation-delay: 0.5s;">ก</span>

    <span class="blinking-char" style="color: #FF007F; animation-delay: 0.55s;">า</span>

    <span class="blinking-char" style="color: #FF0000; animation-delay: 0.6s;">ร</span>

    <span class="blinking-char" style="color: #FF7F00; animation-delay: 0.65s;">ป</span>

    <span class="blinking-char" style="color: #FFFF00; animation-delay: 0.7s;">ร</span>

    <span class="blinking-char" style="color: #7FFF00; animation-delay: 0.75s;">ะ</span>

    <span class="blinking-char" style="color: #00FF00; animation-delay: 0.8s;">ถ</span>

    <span class="blinking-char" style="color: #00FF7F; animation-delay: 0.85s;">ม</span>

    <span class="blinking-char" style="color: #00FFFF; animation-delay: 0.9s;">ศึ</span>

    <span class="blinking-char" style="color: #007FFF; animation-delay: 0.95s;">ก</span>

    <span class="blinking-char" style="color: #0000FF; animation-delay: 1.0s;">ษ</span>

    <span class="blinking-char" style="color: #7F00FF; animation-delay: 1.05s;">า</span>

</marquee>