Team P’Arin (Copy 2085)

✨ Apirat Jamnongrat

<html>
  <style>
       body{
      background-color: black;

}
    .wrap{
		display:block;
      padding-top:5%;
      width:100%;
      text-align:center;
    }
    .main{
		position: relative;
      display:inline-block;
      height:600px;
      width:900px;
      box-sizing:border-box;
      border:3px solid #f008;
      overflow: hidden;
      background-color:#BFDFEC;
    	background-repeat:repeat-x;
 		background-image:url("https://i.stack.imgur.com/b7z29.png");
  		animation: movement 10s linear infinite;

}
    
    .parin{

position: absolute;
        animation: parinmove 3s infinite linear;
    }
    @keyframes parinmove{
        from {
            top: 400px;
              left: -10;
            width: 124px;
            height: 124px;
            transform: rotateZ(0deg);
        }
        to {
            top: -100px;
            left: 600px;
            width: 64px;
            height: 64px;
            transform: rotateZ(360deg);
        }
    }
        @keyframes movement{
      0% {
        background-position:0px 0px;
      }
      100%{
        background-position:560px 0px;
      }
    }
      .sun {
    position: absolute;
    width: 124px;
    height: 124px;
    background: linear-gradient(to bottom, #ff6600 0%, #ffff00 100%);
    border-radius: 50%;
  	 box-shadow: ;
    left: 20px;
    top: 10px;
    animation: movesun 10s linear infinite; 
  }
    .imgsun{
      position: absolute;
      left: -15px;
		width: 150px;
    	height: 150px;
    }
    @keyframes movesun{
        from {
            transform: rotateZ(0deg);
        }
        to {
            transform: rotateZ(360deg);
        }
    }
  </style>
<body>
<div class="wrap">
  <div class="main">
    <div class="sun">
      <img src="https://imgur.com/wkqK7CO.png" class="imgsun">
    </div>
   <img src="https://imgur.com/sYRInAg.png" class="parin">
  </div>
  </div>
  
</body>
<script>

</script>
</html>