บุ๊ค-พรรษา การบ้าน Position ตี้

✨ นายพรรษา ร่องยืด

<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
  <head>
    
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ef/StarfieldSimulation004.gif'), linear-gradient(0deg, rgba(61,116,183,1) 0%, rgba(7,5,18,1) 80%, rgba(0,0,0,1) 100%);
        background-size: cover;
        background-blend-mode: lighten;
        margin-top:50px;
      }
      audio {
        display: flex;
        margin: auto;
        margin-top: 2.5%;
      }
      img {
        z-index: 2;
      }
      #my_picture{
        width:600px;
        height:600px;
        margin:auto;
        margin-top: 2%;
        border-radius:50%;
        overflow:hidden;
        position:relative;
        transition:background .3s;
        animation:rainbowshadow 20s linear infinite;
      }
      .circle{
        width:600px;
        height:600px;
        border-radius:50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation:rainbow 20s linear infinite;
        position:absolute;
      }
      @keyframes rainbowshadow {
        10%{box-shadow:0px 10px 20px #F0F4BF;}
        20%{box-shadow:0px 10px 20px #D4D2F2;}
        30%{box-shadow:0px 10px 20px #C0E4F6;}
        40%{box-shadow:0px 10px 20px #F3D6CE;}
        50%{box-shadow:0px 10px 20px #FCF6BD;}
        60%{box-shadow:0px 10px 20px #D0F4DE;}
        70%{box-shadow:0px 10px 20px #F8D5F8;}
        80%{box-shadow:0px 10px 20px #E8ABB5;}
        90%{box-shadow:0px 10px 20px #2A505A;}
        100%{box-shadow:0px 10px 20px #B3DBD8;}
      }
      @keyframes rainbow{
        10%{background:#F0F4BF;}
        20%{background:#D4D2F2;}
        30%{background:#C0E4F6;}
        40%{background:#F3D6CE;}
        50%{background:#FCF6BD;}
        60%{background:#D0F4DE}
        70%{background:#F8D5F8;}
        80%{background:#E8ABB5;}
        90%{background:#2A505A;}
        100%{background:#B3DBD8;}
      }
      @keyframes sailor{
        10%{opacity:1;}
        20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%{opacity:0;}
      }
      #oat {
        opacity: 0;
        position: absolute;
        top: -35%;
        transform: scale(0.7);
        animation: sailor 20s ease-in-out infinite;
      }
      #mhuukrob {
        position: absolute;
        top: -35%;
        opacity: 0;
        transform: scale(0.7);
        animation: sailor 20s 2s ease-in-out infinite;
      }
      #boss {
        position: absolute;
        top: 30%;
        opacity: 0;
        transform: scale(1.5);
        animation: sailor 20s 4s ease-in-out infinite;
      }
      #fern {
        position: absolute;
        top: -35%;
        left:-50%;
        opacity: 0;
        transform: scale(0.7);
        animation: sailor 20s 6s ease-in-out infinite;
      }
      #keng {
        position: absolute;
        top: -200%;
        opacity: 0;
        transform: scale(0.3);
        animation: sailor 20s 8s ease-in-out infinite;
      }
      #pp {
        position: absolute;
        top: 60%;
        left:33%;
        opacity: 0;
        transform: scale(2.5);
        animation: sailor 20s 10s ease-in-out infinite;
      }
      #dew {
        position: absolute;
        top: -50%;
        opacity: 0;
        transform: scale(0.63);
        animation: sailor 20s 12s ease-in-out infinite;
      }
      #bill {
        position: absolute;
        top: -35%;
        opacity: 0;
        transform: scale(0.7);
        animation: sailor 20s 14s ease-in-out infinite;
      }
      #new{
        position: absolute;
        top: 35%;
        right: 9%;
        opacity: 0;
        transform: scale(1.6);
        animation: sailor 20s 16s ease-in-out infinite;
      }
      #book {
        position: absolute;
        top: -35%;
        opacity: 0;
        transform: scale(0.75);
        animation: sailor 20s 18s ease-in-out infinite;
      }
      p {
        position: absolute;
        z-index: 1;
        font-size: 7em;
        color: white;
        text-align: center;
        font-family: 'Prompt', sans-serif;
        text-shadow: 0 8.36px 8.896px #c4b59d,0 -2px 1px #fff;
       }
      .title {
        display: flex;
        justify-content: center;
      }
      #sailoroat {
        position: absolute;
        opacity: 0;
        animation: sailor 20s ease-in-out infinite;
      }
      #sailormhuukrob {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 2s ease-in-out infinite;
      }
      #sailorboss {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 4s ease-in-out infinite;
      }
      #sailorfern {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 6s ease-in-out infinite;
      }
      #sailorkeng {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 8s ease-in-out infinite;
      }
      #sailorpp {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 10s ease-in-out infinite;
      }
      #sailordew {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 12s ease-in-out infinite;
      }
      #sailorbill {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 14s ease-in-out infinite;
      }
      #sailornew {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 16s ease-in-out infinite;
      }
      #sailorbook {
        position: absolute;
        opacity: 0;
        animation: sailor 20s 18s ease-in-out infinite;
      }
      .pneng {
        position: absolute;
        transform: scale (0.1);
        animation: pneng 5s linear infinite;
      }
      @keyframes pneng{
        from{ 
        transition: all 1.0s;
        transform: rotate(0deg);
        }
        to {
        transition: all 1.0s;
        transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <img class="pneng" style="top:0; left:50;"
    src="https://media.discordapp.net/attachments/930100886003396682/942060990617501756/A331635D-8784-40CE-AF8D-8CD04B0DE418.png?width=200&height=200">
    <img class="pneng" style="top:0; right:30;"
    src="https://media.discordapp.net/attachments/930100886003396682/942060990617501756/A331635D-8784-40CE-AF8D-8CD04B0DE418.png?width=200&height=200">
    <img class="pneng" style="bottom:0; left:30;"
    src="https://media.discordapp.net/attachments/930100886003396682/942060990617501756/A331635D-8784-40CE-AF8D-8CD04B0DE418.png?width=200&height=200">
    <img class="pneng" style="bottom:0; right:40;"
    src="https://media.discordapp.net/attachments/930100886003396682/942060990617501756/A331635D-8784-40CE-AF8D-8CD04B0DE418.png?width=200&height=200">
    <div class="title"><p id="sailoroat">SAILOR OAT</p></div>
    <div class="title"><p id="sailormhuukrob">SAILOR MY</p></div>
    <div class="title"><p id="sailordew">SAILOR DEW</p></div>
    <div class="title"><p id="sailorpp">SAILOR PP</p></div>
    <div class="title"><p id="sailorkeng">SAILOR KENG</p></div>
    <div class="title"><p id="sailorfern">SAILOR FERN</p></div>
    <div class="title"><p id="sailorboss">SAILOR BOSS</p></div>
    <div class="title"><p id="sailorbook">SAILOR BOOK</p></div>
    <div class="title"><p id="sailorbill">SAILOR BILL</p></div>
    <div class="title"><p id="sailornew">SAILOR NEW</p></div>

</div>