แหล่งเรียนรู้เพิ่มเติม

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

<style>

  /* กำหนดการเคลื่อนไหวของคลื่นน้ำ (Zig-zag) และพื้นที่ */

  .wave-container {

    height: 60px; /* ความสูงที่เหมาะสมสำหรับขนาด 35px */

    width: 100%;

    overflow: hidden;

    position: relative; /* สำคัญสำหรับการวางตำแหน่งปลา */

    margin-top: 10px;

  }

  /* สำหรับจำลอง Gradient โดยใช้สีไล่ระดับ */

  .color-0 { color: #FF69B4; } /* ชมพู */

  .color-1 { color: #F061C3; }

  .color-2 { color: #E054D2; }

  .color-3 { color: #D146E1; }

  .color-4 { color: #C239F0; }

  .color-5 { color: #B22BFF; } /* ม่วง */

  /* ปลา: ตำแหน่งด้านหน้าข้อความ */

  .fish {

    position: absolute;

    top: 15px; /* ปรับตำแหน่ง */

    left: 10px;

    font-size: 35px; /* ขนาดปลาเท่าตัวอักษร */

    z-index: 2; /* ให้อยู่ด้านหน้าข้อความ */

    animation: swim-animation 5s infinite ease-in-out; /* สร้างการเคลื่อนไหวจำลองการว่าย */

  }

  /* การเคลื่อนไหวปลา (สำหรับโค้ดที่ทันสมัยกว่า) */

  @keyframes swim-animation {

    0% { transform: translateX(0) scaleX(1); }

    50% { transform: translateX(20px) scaleX(1); }

    100% { transform: translateX(0) scaleX(1); }

  }

</style>

<div class="wave-container">

  <span class="fish">🐠</span> 

  <marquee direction="right" scrollamount="10" behavior="alternate" style="width: 100%;">

    <marquee direction="up" behavior="alternate" scrollamount="3">

      <span style="font-size: 35px; font-weight: bold;">

        <span class="color-0">ก</span><span class="color-1">า</span><span class="color-2">ร</span>

        <span class="color-3">ป</span><span class="color-4">ร</span><span class="color-5">ะ</span>

        <span class="color-0">ถ</span><span class="color-1">ม</span><span class="color-2">ศ</span>

        <span class="color-3">ึ</span><span class="color-4">ก</span><span class="color-5">ษ</span>

        <span class="color-0">า</span>

      </span>

    </marquee>

  </marquee>

</div>