Welcome to CODEBOX! (Branch 839)
✨ Naiohm Pwpp
<html> <style> body { background-color: wheat; overflow: hidden; } .wrap { display: block; padding-top: 2.5%; width: 100%; text-align: center; } .main { position: relative; display: inline-block; height: 550px; width: 1000px; 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; width: 120px; height: 120px; animation: parinmove 4s infinite linear; } @keyframes parinmove { from { top: 600px; right: -10; transform: rotateZ(0deg); } to { top: -700px; right: 600px; transform: rotateZ(-360deg); } } @keyframes movement { 0% { background-position: 0px 0px; } 100% { background-position: 560px 0px; } } .sun { position: absolute; width: 204px; height: 204px; background-image: url("https://cdn.discordapp.com/attachments/798205933716635681/809440343355162644/islands-computer-game-isometric-set_1284-35570-removebg-preview.png"); left: 20px; top: 10px; animation: movesun 1s infinite alternate; } .imgsun { position: absolute; left: 35px; width: 150px; height: 150px; animation: moveimgsun 10s linear infinite; } @keyframes moveimgsun { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } @keyframes movesun{ 0% {left:35px; top:10px; } 30% {right:50px; top:20px;} } .airplane { position: absolute; top: 200px; right: -400px; /* left: 0; */ animation: airplanemove 10s linear infinite; } @keyframes airplanemove{ from { transform: translateX(0px); } to { transform: translateX(-2500px); } } .banner { position: absolute; bottom: 0px; left: 320px; animation: bannermove 1s alternate infinite; } @keyframes bannermove { from { transform: translateY(0px) rotateZ(0deg); } to { transform: translateY(10px) rotateZ(2deg); } } .palm { position: absolute; top: 100px; left: -40px; animation: movepeople 2s infinite; } .pang { position: absolute; top: 138px; left: 200px; animation: movepeople 2s infinite; } .kim { position: absolute; left: -150px; bottom: -140px; animation: kimarrive 4s alternate infinite; } @keyframes kimarrive { from { transform: translateY(190px); } to { transform: translateY(0px); } } .jay { position: absolute; top: 160px; left: 320px; animation: movepeople 2s infinite; } .don { position: absolute; top: 130px; right: 0px; animation: movepeople 2s infinite; } .tonhom { position: absolute; top: 150px; left: 320px; animation: movepeople 2s infinite; } .mod { position: absolute; top: 155px; right: 250px; animation: movepeople 2s infinite; } .phu { position: absolute; top: 120px; right: -90px; transform: rotateZ(90deg); } .ohm { position: absolute; top: 130px; right: 135px; animation: movepeople 2s infinite; } @keyframes movepeople{ 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .bubblemain{ background: url("https://imgur.com/zEAVbdX.png"); background-size: 200px 200px; width:200px; height:200px; bottom:-200px; position:absolute; display: inline-block; } .bubble1{ background: url("https://cdn.discordapp.com/attachments/798205933716635681/809472796287565914/149019802_164915691901684_5829502625261816680_n.png"); position: absolute; top: 40%; left: 35%; background-size: 50px 50px; width:50px; height:50px; } .bubble2{ background: url("https://cdn.discordapp.com/attachments/798205933716635681/809437321795469322/20191023_133323-removebg-preview_1.png"); position: absolute; top: 30%; left: 25%; background-size: 100px 100px; width:100px; height:100px; } .bubble3{ background: url("https://cdn.discordapp.com/attachments/798205933716635681/809797752359223296/vEWdBQ6.png"); position: absolute; top: 25%; left: 25%; background-size: 100px 100px; width:100px; height:100px; } .bubble4{ background: url("https://cdn.discordapp.com/attachments/798205933716635681/809421231631499345/84458983_2741963735892425_6825954762907713536_o-removebg-preview.png"); position: absolute; top: 10px; left: -50px; background-size: 300px 300px; width:300px; height:300px; } .bubble5{ background: url("https://cdn.discordapp.com/attachments/798205933716635681/809444168148844564/image0.png"); position: absolute; top: 50px; left: -30px; background-size: 170px 170px; width:170px; height:170px; } .bubble6{ background: url("https://cdn.discordapp.com/attachments/798205933716635681/809438374309265428/profile.png"); position: absolute; top: 60px; left: 60px; background-size: 80px 80px; width:80px; height:80px; } @keyframes a{ 0%{ bottom:-200px; left:200px; opacity:0; } 30%{ left:300px; } 50%{ opacity:1; left:450px; } 75%{ left:300px; } 100%{ left:200px; bottom:800px; } } @keyframes d{ 0%{ bottom:-200px; left:200px; opacity:0; } 30%{ left:300px; } 50%{ opacity:1; left:450px; } 75%{ left:300px; } 100%{ left:100px; bottom:800px; } } @keyframes b{ 0%{ bottom:-200px; left:500px; opacity:0; } 30%{ left:600px; } 50%{ left:500px; opacity:1; } 75%{ left:600px; } 100%{ left:500px; bottom:800px; } } @keyframes c{ 0%{ bottom:-200px; left:100px; opacity:0; } 50%{ left:500px; opacity:1; } 100%{ left:100px; bottom:800px; } } </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 class="banner"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809764818775965696/AviC3A3o2Bfaixa2B22B-2BEdiC3A7C3A3o2BBlog2BPNG-Free.png" width="850" height="350"> <div class="palm"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809421231631499345/84458983_2741963735892425_6825954762907713536_o-removebg-preview.png" width="400" height="400"> </div> <div class="pang"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809433885120397413/S__94044163-removebg-preview-removebg-preview.png" width="120" height="120"> </div> <div class="jay"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809438374309265428/profile.png" width="85" height="85"> </div> <div class="ohm"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809797752359223296/vEWdBQ6.png" width="100" height="100"> </div> <div class="don"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809443742959272006/gennie_platinum.png" width="130" height="130"> </div> <div class="tonhom"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809444168148844564/image0.png" width="190" height="190"> </div> <div class="mod"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809472796287565914/149019802_164915691901684_5829502625261816680_n.png" width="90" height="90"> </div> <div class="phu"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809774603958091816/profile_photo-190x190-removebg-preview.png" width="90" height="90"> </div> </div> </div> <div class="sun"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809796863691587594/92_20210211125710.png" class="imgsun"> </div> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809796846506999858/image4-removebg-preview.png" class="parin"> <div class="kim"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/809437321795469322/20191023_133323-removebg-preview_1.png" width="400" height="400"> </div> <div class="bubblemain" style="animation: a 6s infinite ease 0s;"> <div class="bubble1"></div> </div> <div class="bubblemain" style="animation: a 6s infinite ease 5s;"> <div class="bubble2"></div> </div> <div class="bubblemain" style="animation: d 6s infinite ease 10s;"> <div class="bubble3"></div> </div> <div class="bubblemain" style="animation: b 6s infinite ease 12s;"> <div class="bubble4"></div> </div> <div class="bubblemain" style="animation: c 8s infinite ease 7s;"> <div class="bubble5"></div> </div> <div class="bubblemain" style="animation: c 8s infinite ease 9s;"> <div class="bubble6"></div> </div> </div> </div> </body> <script> </script> </html>