B-Kwan การบ้าน Position

✨ TADA TEERAWARAKUL

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
      
      body{
        background:#333;
        margin:0;
        font-family:sans-serif;
      }
      #my_picture{
        width:600px;
        height:400px;
        background:#fff;
        margin:auto;
        margin-top:calc(50vh - 200px);
        border-radius:5px;
        overflow:hidden;
        box-shadow:0px 10px 20px #0003;
        position:relative;
        perspective:1000px;
        transition:background .3s;
      }
      #sky_wheel{
        background:linear-gradient(to bottom,
          hsl(230,80%,40%),
          hsl(290,50%,10%)50%,
          hsl(60, 100%, 70%)50%,
          hsl(20,100%,50%));
        width:100%;
        padding-top:100%;
        height:200%;
        position:absolute;
        left:0;
        bottom:-200px;
        z-index:10;
        transform:rotate(0deg);
        transition:all 1s
      }
      #my_picture[data-day="-1"] #sky_wheel{
        transform:rotate(180deg);
      }
      #moon{
        background:hsl(60,100%,90%);
        box-shadow:0px 0px 30px hsl(60,100%,90%);
        --w:100px;
        width:var(--w);
        height:var(--w);
        position:absolute;
        left:calc(50% - (var(--w)/2));
        border-radius:100%;
        bottom:50px;
        transition:bottom 1s .4s;
      }
      #my_picture[data-day="1"] #moon{
bottom:-150px;
      }
      #sun{
        --w:100px;
        position:absolute;
        left:calc(50% - (var(--w)/2));
        top:50px;
        animation:sun 10s infinite linear;
        transform:rotate(0deg);
        transition:top 1s .4s;
      }
      #my_picture[data-day="-1"] #sun{
        top:-150px;
      }
      .star{
        width:2em;
        height:2em;
        position:absolute;
        background-image:url("https://media.discordapp.net/attachments/932851813789605888/941692662963142726/576-5765265_transparent-northern-star-png-clipart-removebg-preview.png");
        background-size:cover;
        z-index:100;
        justify-content:center;
        position:absolute;
        mix-blend-mode: lighten;
        animation:star 1s infinite linear alternate, moon 1s infinite linear;
      }

.snows {
		    position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: url("https://cdn.discordapp.com/attachments/447418394933854248/942341760959537162/snow.png");
        animation: snows 15s infinite linear;
      }

.s1{
        top:38%;
        left:80%;
      }
      .s2{
        animation-delay:.9s;
        top:30%;
        left:90%;
      }    
      .s3{
        animation-delay:.2s;
        top:28%;
        left:5%;
      }
      .s4{
        animation-delay:.4s;
        top:33%;
        left:30%;
      }
      .s5{
        animation-delay:.7s;
        top:35%;
        left:60%;
      }      
      .s6{
        animation-delay:.5s;
        top:36%;
        left:10%;
      }

.snow {
        top:0%;
        left:0%;
      }

.cloud{
        width:10em;
        height:5em;
        position:absolute;
        background-image:url("https://cdn.discordapp.com/attachments/932851813789605888/941707835899772958/142-1427583_cloud-cloud-png-clip-art-transparent-png.png");
        background-size:cover;
        z-index:100;
        justify-content:center;
        position:absolute;
        /* mix-blend-mode: luminosity; */
        animation:cloud-run 15s linear infinite;
        /* animation:reindeer 5s linear infinite; */
      }
      .c1 {
        top:65%;
        left:700px;
      }
      .c2{
        top:68%;
        left:850px;
      }
      .c3{
        top:60%;
        left:1000px;
      }
      .c4{
        top:65%;
        left:1150px;
      }
      .c5{
        top:68%;
        left:1300px;
      }
      .c6{
        top:60%;
        left:1500px;
      }
      @keyframes star{
        from{
          opacity:1}
        to{
          opacity:0}
      }
      @keyframes moon{
        from{
          transform:rotate(0deg);
        }
        to{
          transform:rotate(360deg);
        }
      }
      #my_picture[data-day="-1"]{
        background:hsl(260,80%,20%);
      }
      #my_picture[data-day="1"]{
        background:hsl(60,100%,70%);
      }
      #toggle{
        position:fixed;
        bottom:1em;
        right:1em;
        background:#fff;
        padding:.5em;
        border-radius:4px;
        cursor:pointer;
        font-family: 'Kanit', sans-serif;
        /* font-weight:bold; */
      }
      #toggle:hover{
        position:fixed;
        bottom:1em;
        right:1em;
        background:rgba(165,190,100,.8);
        padding:.5em;
        border-radius:4px;
        cursor:pointer;
        font-family: 'Kanit', sans-serif;
        /* font-weight:bold; */
      } 
      .santa{
        width:469px;
        height:663px;
        position:absolute;
        bottom:-170px;
        left:-100px;
        background-image:url("https://media.discordapp.net/attachments/932851813789605888/941668847004569650/IMG_3620.png?width=469&height=663");
        background-size:cover;
        position:absolute;
        z-index:10000;
        transform:scale(0.3,0.3);
        animation:santajump .5s linear infinite alternate;
      }
      .reindear{
        width:150px;
        height:110px;
        top:10px;
        right:-250px;
        background-image:url("https://cdn.discordapp.com/attachments/932851813789605888/941673977171034122/santa-claus-sleigh-flat-vector-illustration-empty-magic-sledge-harnessed-reindeers-side-view-christmas-presents-delivery-164998877-removebg-preview_2.png");
        background-size:cover;
        position:absolute;
        z-index:1000;
        animation:reindeer 5s linear infinite;
      }
      .snowman{
        width:200px;
        height:300px;
        bottom:5px;
        left:370px;
        background-image:url("https://pngimg.com/uploads/snowman/snowman_PNG99826.png");
        background-size:cover;
        position:absolute;
        z-index:1000;
        transform:scale(0.6,0.6);
        animation:snowjump .5s .5s linear infinite alternate;
      }
      
      .land{
        width:150%;
        height:200px;
        bottom:-100px;
        left:-150px;
        position:absolute;
        z-index:900;
        border-radius:50%;
        background-image:linear-gradient(to bottom, hsl(40,100%,100%),hsl(20,0%,70%));
      }

.tree{
        width:600px;
        height:600px;
        bottom:-100px;
        left:10px;
        z-index:1000;
        position:absolute;
        background-image:url("https://media.discordapp.net/attachments/932851813789605888/941685649596112896/ch.png");
        background-size:cover;
        transform:scale(0.45,0.45);
      }
/*
      .vapour {
        position:relative;
        display: flex;
        z-index: 999;
        padding: 0 15px;
      }

.vapour span {
        position: relative;
        bottom: 50px;
        display: inline-block;
        margin: 0 2px 10px 0;
        min-width: 7px;
        height: 120px;
        background: white;
        background-blend-mode: darken, multiply;
        border-radius: 50%;
        animation: animate 5s linear infinite;
        opacity: 0;
        filter: blur(8px);
        animation-delay:calc(var(--i)* -0.5s);
      } */
      @keyframes santajump{
        from{transform:scale(0.3,0.3) translateY(0px);}
        to{transform:scale(0.3,0.3) translateY(-20px);}
      }

@keyframes snowjump{
        from{transform:scale(0.6,0.6) translateY(0px);}
        to{transform:scale(0.6,0.6) translateY(-20px);}
      }
      @keyframes reindeer{
        0%{
          transform:translatex(0px) translatey(20px);
          }
        10%{
          transform:translatex(-100px) translatey(0px);
        }
        20%{
          transform:translatex(-200px) translatey(20px);
        }
        30%{
          transform:translatex(-300px) translatey(0px);
        }
        40%{
          transform:translatex(-400px) translatey(20px);
        }
        50%{
          transform:translatex(-500px) translatey(0px);
        }
        60%{
          transform:translatex(-600px) translatey(20px);
        }
        70%{
          transform:translatex(-700px) translatey(0px);
        }
        80%{
          transform:translatex(-800px) translatey(20px); 
        }
        90%{
          transform:translatex(-900px) translatey(0px);
        }
        100%{
          transform:translatex(-1000px) translatey(20px);
        }
      }
      
      @keyframes cloud-run{
        0%{
          transform:translatex(0px) translatey(5px);
          }
        10%{
          transform:translatex(-200px) translatey(0px);
        }
        20%{
          transform:translatex(-400px) translatey(5px);
        }
        30%{
          transform:translatex(-600px) translatey(0px);
        }
        40%{
          transform:translatex(-800px) translatey(5px);
        }
        50%{
          transform:translatex(-1000px) translatey(20px);
        }
        60%{
          transform:translatex(-1200px) translatey(0px);
        }
        70%{
          transform:translatex(-1400px) translatey(5px);
        }
        80%{
          transform:translatex(-1600px) translatey(0px); 
        }
        90%{
          transform:translatex(-1800px) translatey(5px);
        }
        100%{
          transform:translatex(-2000px) translatey(0px);
        }
    }
    @keyframes snows{
        0%{
            background-position: 0 0;
            }
        100%{
            background-position: 0px 2006px;
        }
    }
/*
    @keyframes animate{
        0%{
            transform: translateY(0) scaleX(1);
            opacity: 0;
          }
        15%{
            opacity: 1;
          }
        50%{
            transform: translateY(-75px) scaleX(5);
          }
        95%{
            opacity: 0;
          }
        100%{
            transform: translateY(-150px) scaleX(10);
          }
    } */
    </style>
  </head>
  <body>
    
    <div id="my_picture" data-day="-1">
      <div class="person">
      </div>
      <div class="snows snow">
        </div>
      <div id="sky_wheel">
        
        <div class="star s1">
        </div>
        <div class="star s2">
        </div>
        <div class="star s3">
        </div>
        <div class="star s4">
        </div>
        <div class="star s5">
        </div>
        <div class="star s6">
        </div>

</div>
      <div class="santa">
      </div>
      <div class="reindear">
      </div>
      <div class="snowman">
        
      </div>
      <div class="land">
      </div>
      <div class="tree">
      </div>

</div>
    <div id="toggle" onclick="my_picture.dataset.day *= -1">
      Switch
    </div>
  </body>
</html>