Week 3 – Animation (Branch 913)

✨ นายจิรายุ ธรณธิติ

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#001;
        margin:0;
      }
      @keyframes kraprib{
        from{opacity:.2}
        to{opacity:1}
      }
      @keyframes moon{
        from{transform:rotate(0deg)}
        to{transform:rotate(360deg)}
      }
      .star{
        position:absolute;
        width:1em;
        height:1em;
        background:yellow;
        opacity:1;
        box-shadow:0px 0px 20px 10px #ff03;
      }
      .star:nth-child(1){
        top:30%;
        left:80%;
        animation:kraprib 1s infinite alternate,moon 1s infinite linear;
      }
       .star:nth-child(2){
        top:80%;
        left:60%;
      }
        .star:nth-child(3){
        top:10%;
        left:20%;
      }
        .star:nth-child(4){
        top:70%;
        left:10%;
      }
        .star:nth-child(5){
        top:60%;
        left:50%;
      }
        .star:nth-child(6){
        top:20%;
        left:70%;
      }
        .star:nth-child(7){
        top:50%;
        left:20%;
      }
      
    </style>
  </head>
  <body>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
  </body>
</html>