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>