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

📢Workshop

Workshop ที่1 

การทำตัวหนังสือวิ่ง   คลิก!  http://vrisad.blogspot.com 

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

<style>

/* 1. กำหนด Keyframes สำหรับการสลับสี (เปลี่ยน Gradient) */

@keyframes color-swap {

    0% {

        /* ไล่สีจากเขียวเข้มไปอ่อน (เริ่มต้น) */

        background: linear-gradient(to right, #006400, #90EE90); 

    }

    50% {

        /* ไล่สีจากเขียวอ่อนไปเข้ม (สลับ) */

        background: linear-gradient(to right, #90EE90, #006400);

    }

    100% {

        /* กลับไปเริ่มต้น */

        background: linear-gradient(to right, #006400, #90EE90);

    }

}

/* 2. กำหนด Style สำหรับข้อความ */

.shifting-green-text {

    font-size: 40px;

    font-weight: bold;

    /* 3. ใช้ Keyframes ที่สร้างไว้ */

    animation: color-swap 2s infinite alternate; /* สลับสีทุก 2 วินาที ทำซ้ำไม่สิ้นสุด */

    /* 4. เทคนิค Gradient Text */

    -webkit-background-clip: text; /* สำหรับ Chrome, Safari */

    background-clip: text; /* มาตรฐาน */

    color: transparent; /* ทำให้สีข้อความโปร่งใส */

    /* 5. เพิ่ม Text Shadow เพื่อให้มีแสงเรืองแสง (Optional แต่ช่วยให้ข้อความเด่นขึ้น) */

    text-shadow:

        0 0 5px #fff,

        0 0 10px #3CB371; /* สีเขียว */

}

</style>

<marquee direction="right">

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

</marquee>