Welcome to CODEBOX! (Copy 2150)
✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์
<html> <style>body{ overflow:hidden; background-image: url("https://qlab.app/cookbook/images/thank-you-qlab-but-our-princess-is-in-another-castle/background-simple.png"); animation: bg 30s infinite linear; background-size: 300%; } .container { margin-left:15%; margin-top:6.5%; position: relative; width: 1200px; transform: scale(1.3); border:1px solid #cccccc; background-image: url("https://i.pinimg.com/originals/2c/76/b0/2c76b01b04ea5f653da08f2f43c39a7f.gif"); background-size: contain; background-postion: center center; height: 580px; } .sonic { top: 5em; transition: 0.5s; left: 40em; position: absolute; filter: drop-shadow(0 0 30px yellow); animation: heartbeat 5s infinite; } .knuckle { position: absolute; top: 22em; right: 10em; filter: drop-shadow(0 0 6px #699BFF); animation: runner 3s infinite linear; } .flim { position: absolute; top: 0px; left: 16px; } .tails { position: absolute; left: 60em; filter: drop-shadow(0 0 6px #699BFF); animation: float 2s ease-in-out infinite; } .person-1 { position: absolute; top: 32px; left: 56px; } .cream { top: 3em; transform: scaleX(-1); position: absolute; left: 15em; filter: drop-shadow(0 0 6px #699BFF); animation: float-1 2s ease-in-out infinite; } .person-2 { position: absolute; top: 32px; left: 52px; } .amy { top: 23em; position: absolute; left: 10em; filter: drop-shadow(0 0 6px #699BFF); animation: runner-1 5s infinite linear; } .person-3 { position: absolute; top: 20px; left: 42px; } .shadow { top: 20.5em; position: absolute; left: 45em; filter: drop-shadow(0 0 6px #699BFF); animation: think 3s infinite; } .person-4 { position: absolute; top: 16px; left: 0px; } .bat { top: 20em; position: absolute; left: 55em; filter: drop-shadow(0 0 6px #699BFF); animation: think 3s infinite; } .person-5 { position: absolute; top: 12px; left: 12px; } .eggman { top: 17em; position: absolute; transform-origin: bottom; left: 30em; filter: drop-shadow(0 0 6px #699BFF); animation: laugh 2.5s infinite; } .person-6 { position: absolute; top: 0px; left: 48px; } .ikeaw { z-index: -1; position: absolute; top: 18em; right: 10em; filter: drop-shadow(0 0 6px #699BFF); animation: runner 2s infinite linear alternate; } .pond { position: absolute; top: 0px; left: 56px; } .aut { position: absolute; top: 22em; right: 0em; filter: drop-shadow(0 0 6px #699BFF); animation: seek 4s infinite alternate; } .person-7 { position: absolute; top: 12px; left: 12px; } @keyframes runner { 0% {transform: translateX(40em);} 100% {transform: translateX(-100em);} } @keyframes runner-1 { 0% {transform: translateX(-40em);} 100% {transform: translateX(100em);} } @keyframes bg { from {background-position: 0% 0px;} to {background-position: 100% 0px;} } @keyframes seek { 0% {transform: translateX(150%);} 100% {transform: translateX(-150%);} } @keyframes float { 0% {transform: translatey(20px);} 50% {transform: translatey(-20px);} 100% {transform: translatey(20px);} } @keyframes float-1 { 0% {transform: translatey(0px) scaleX(-1);} 50% {transform: translatey(-20px)scaleX(-1);} 100% {transform: translatey(0px)scaleX(-1);} } @keyframes think { 0% {transform: rotateY(0deg);} 49% {transform: rotateY(0deg);} 50% {transform: rotateY(180deg);} 99% {transform: rotateY(180deg);} 100% {transform: rotateY(0deg);} } @keyframes laugh { 1% {transform: scaleY(1.04);} 10% {transform: scaleY(1);} 11% {transform: scaleY(1.04);} 20% {transform: scaleY(1);} 21% {transform: scaleY(1.04);} 30% {transform: scaleY(1);} 31% {transform: scaleY(1.04);} 40% {transform: scaleY(1);} 41% {transform: scaleY(1.04);} 50% {transform: scaleY(1);} 51% {transform: scaleY(1.04);} 60% {transform: scaleY(1);} 61% {transform: scaleY(1.04);} 70% {transform: scaleY(1);} 71% {transform: scaleY(1.04);} 80% {transform: scaleY(1);} 81% {transform: scaleY(1.04);} 90% {transform: scaleY(1);} 91% {transform: scaleY(1.04);} 100% {transform: scaleY(1);} } @keyframes heartbeat { 1% {transform: scale(1.3);} 10% {transform: scale(1);} 11% {transform: scale(1.1);} 20% {transform: scale(1);} 21% {transform: scale(1.3);} 30% {transform: scale(1);} 31% {transform: scale(1.1);} 40% {transform: scale(1);} 41% {transform: scale(1.3);} 50% {transform: scale(1);} 51% {transform: scale(1.1);} 60% {transform: scale(1);} 61% {transform: scale(1.3);} 70% {transform: scale(1);} 71% {transform: scale(1.1);} 80% {transform: scale(1);} 81% {transform: scale(1.3);} 90% {transform: scale(1);} 91% {transform: scale(1.1);} 100% {transform: scale(1);} }</style> <body> <div class = "container"> <div class = "sonic"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810089594653245470/Pjabont.png" width="150px" height="200px"></div> <div class="knuckle"><img src="http://info.sonicretro.org/images/5/58/Advance_knuckles.png" width="150px" height="200px"> <div class="flim"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810092266072178718/c66d45d41e741efb.png" width="80px"> </div> </div> <div class="tails"><img src="https://lh3.googleusercontent.com/proxy/t7rajFhaJksf9xx09QluoK-mYSI0r9uvYiAv7U9Una4Y_PvSz7RCDpCBp8StP9h9F93mId0oz_3-8gM1gN4L1Y8pf_4kD8hwUyg" height="200px"> <div class="person-1"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> <div class="cream"><img src="https://www.nicepng.com/png/full/356-3569318_cream-the-rabbit-cream-the-rabbit-flying.png" width=220pxx> <div class="person-2"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> <div class="amy"><img src="http://info.sonicretro.org/images/c/cc/Sa2_amy.png" width=180px height=200px> <div class="person-3"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> <div class="shadow"><img src="https://lh3.googleusercontent.com/proxy/phmcMvCwxMgGuO8VpSor_X4EIKr0yipV6I9dfkJ8RyjI-sfKE90tQ8vMC_gfIeRlP_uVKy16EjI2Y4HW3CFXXJLYRZE_oHEelJDOtF5x42S8YVkbfXo"width=132px> <div class="person-4"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> <div class="bat"><img src="https://i.pinimg.com/originals/d6/d5/9e/d6d59e031086d7bab50a274a43998f07.png" width=160px> <div class="person-5"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> <div class="eggman"><img src="https://i.pinimg.com/originals/c5/a1/10/c5a11032c7103b293fb90d0d5a9bd102.png" width=220px> <div class="person-6"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> <div class="ikeaw"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810090313879257118/png-transparent-sonic-riders-sonic-free-riders-shadow-the-hedgehog-sonic-the-hedgehog-jet-the-hawk-s.png" width=220px> <div class="pond"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810096585450061854/image0.png" width="100px"> </div> </div> <div class="aut"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810093207249354782/png-clipart-sonic-the-hedgehog-porcupine-purple-mammal-removebg-preview.png" width="150px" height="200px"> <div class="person-7"><img src="https://cdn.discordapp.com/attachments/798207225184124928/810104940751618068/mystery-person-png-mystery-customer-person-9LKwzI-clipart-removebg-preview.png" width="100px"> </div> </div> </div> </body> </html>