Gecko [ myeducation.co.th ]

Name	Size	Permission	Action
egp	[ DIR ]	drwxr-xr-x
index.html	3.17 KB	-rw-r--r--

Code Editor : index.html

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AFRA APACHE</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
      animation: background-gradient 10s linear infinite;
    }
    @keyframes background-gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .spinner {
      width: 250px; /* ปรับขนาด spinner */
      height: 250px; /* ปรับขนาด spinner */
      border: 25px solid #ccc; /* ปรับขนาดเส้นขอบ */
      border-radius: 50%;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .spinner.speeding {
      animation-duration: 1s;
    }
    /* เพิ่มสไตล์สำหรับเปลี่ยนสี spinner อัตโนมัติ */
    .spinner {
      animation: spin-color 2s linear infinite;
    }
    @keyframes spin-color {
      0% { border-color: red; }
      14% { border-color: orange; }
      28% { border-color: yellow; }
      42% { border-color: green; }
      56% { border-color: blue; }
      70% { border-color: indigo; }
      84% { border-color: violet; }
      100% { border-color: red; }
    }

#afra-apache {
        font-family: sans-serif;
        text-align: center;
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      h1 {
        font-size: 48px;
        color: #ccc;
        animation: color-change 2s linear infinite;
      }
      
      @keyframes color-change {
        0% { color: red; }
        14% { color: orange; }
        28% { color: yellow; }
        42% { color: green; }
        56% { color: blue; }
        70% { color: indigo; }
        84% { color: violet; }
        100% { color: red; }
      }
      
      /* เพิ่ม animation สำหรับการวิ่งไป วิ่งมา */
      
      h1 {
        animation: move 2s linear infinite alternate;
      }
      
      @keyframes move {
        0% { transform: translateX(0); }
        50% { transform: translateX(10%); }
        100% { transform: translateX(0); }
      }

.index1{
        color: black;
    background: white;
    padding: 10px;
      }

</style>
</head>
<body>
  <div class="spinner"> </div>

<div id="afra-apache">
    <h1><a class="index1" href="https://blog.ttt-website.com/">AFRA APACHE</a></h1>
  </div>

${this.title}

Code Editor : index.html