Team P’Arin (Copy 2085) (Branch 2090)
✨ นายพิสิฐพงศ์ ปาละวิสุทธิ์
<html> <style> body { background-color: wheat; } .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 5s infinite linear; } @keyframes parinmove { from { top: 400px; left: -150; 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); } } .airplane { position: absolute; top: 250px; left: -70px; animation: airplanemove 2s alternate infinite; } @keyframes airplanemove{ from { transform: translateY(0px); } to { transform: translateY(15px); } } </style> <body> <div class="wrap"> <div class="main"> <div class="airplane"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809438704171089920/kisspng-airplane-cartoon-cartoon-airplane-5a7dd08e949053.8450888315181948306085-removebg-preview_1.png" width="450" height="249.844"> </div> <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>