Godjabont Group E P’Faiifuu
✨ PANAS CHAROENRUK
<html> <head> <title>Let's Start </title> <style> body{ background: RGB(244, 164, 96) ; } .box{ background-image: url(https://media.discordapp.net/attachments/798210303846383676/809803700335411270/image1.png?width=856&height=605); width:856; height:605; background-repeat: no-repeat; background-size: 856px 605px; position: relative; animation: lava 35s linear infinite; overflow: hidden; z-index:-1; } .volcano{ background-image: url(https://media.discordapp.net/attachments/798210303846383676/809781016641798165/image0.png?width=856&height=605); background-size: auto; width:856; height:605; position: absolute; top: 0px; animation:erupt 30s linear infinite, satern 0.6s infinite alternate linear; z-index:-1; } .cloud{ background-image: url(https://media.discordapp.net/attachments/798210303846383676/809782238773379082/image0.png?width=428&height=605); width: 428; height: 605; position: absolute; top:-100; left: -500; z-index:-2; animation: loy 10s linear infinite; overflow: hidden } .cloud2{ background-image: url(https://media.discordapp.net/attachments/798210303846383676/809784219852996617/image0.png?width=428&height=605); width: 428; height: 605; position: absolute; top:-100; left: -500; z-index:-2; animation: loy 10s linear infinite; animation-delay: 3s; overflow: hidden } .godzilla{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809832822533652480/93_20210212225444.png); width:600px; height:600px; position:absolute; background-image: 600px 600px; background-repeat: no-repeat; top:0; left:200; animation: godwalk 30s infinite alternate; transform-style: preserve-3d; } .people1{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994648990515220/93_20210213093757.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:390px; left: 230px; animation:jump1 0.3s infinite alternate; animation-delay:3.5s; } .people2{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994648620761138/93_20210213002550.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:400px; left: 200px; animation:jump2 0.3s infinite alternate; animation-delay:4s; } .people3{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649439174696/93_20210213095256.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:390px; left: 320px; animation:jump3 0.3s infinite alternate; animation-delay:2s; } .people4{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649220415488/93_20210213094336.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:400px; left: 280px; animation:jump4 0.3s infinite alternate; animation-delay:3s; } .people5{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649694502912/93_20210213100000.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:400px; left: 360px; animation:jump5 0.3s infinite alternate; animation-delay:2.5s; } .people6{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649912475718/93_20210213102303.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:400px; left: 400px; animation:jump6 0.3s infinite alternate; animation-delay:1.5s; } .people7{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994650190217246/93_20210213104034.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:400px; left: 450px; animation:jump7 0.3s infinite alternate; animation-delay:1s; } .people8{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994650449870888/93_20210213104654.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:440px; left: 320px; animation:jump8 0.3s infinite alternate; animation-delay:0.5s; } .people9{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/810012992715489311/93_20210213120159.png); width:200px; height:200px; background-size:200px 200px; position:absolute; top:440px; left: 150px; animation:jump9 0.3s infinite alternate; animation-delay:0.5s; } .leader{ background-image:url(https://media.discordapp.net/attachments/798210303846383676/809832823825498142/20210212_235546.gif); width:200px; height:200px; background-size:200px 200px; position:absolute; top:440px; left: 510px; animation:jump10 0.3s infinite alternate; animation-delay:0.5s; } .btn1{ height:35px; border-radius: 16px; border: 5px solid #723c2a; background-color: #925946; font-size:18px; cursor: pointer; outline: none; position: relative; bottom: 0; left: 50%; right: 50%; } button:hover{ background: #F6EEE0; } @keyframes erupt{ 0%{background-image: url(https://media.discordapp.net/attachments/798210303846383676/809781016641798165/image0.png?width=856&height=605);} 50%{background-image: url(https://media.discordapp.net/attachments/798210303846383676/809781016873009212/image1.png?width=856&height=605);} 100%{background-image:url(https://media.discordapp.net/attachments/798210303846383676/809781017141051412/image2.png?width=856&height=605)} } @keyframes satern { from{top: 0px;} to{top:-30px;} } @keyframes lava { 0%{background-image:url(https://media.discordapp.net/attachments/798210303846383676/809803700335411270/image1.png?width=856&height=605);} 50%{background-image:url(https://media.discordapp.net/attachments/798210303846383676/809803699944685588/image0.png?width=856&height=605);} } @keyframes loy{ from{left: -500;} to{left: 1000;} } @keyframes godwalk{ 0%{transform:scale(0); opacity: 0%;} 25%{transform:scale(0.5); opacity: 50%;} 50%{transform:scale(1); opacity: 100%;} 75%{transform: scaleX(-1);} 100%{transform: scaleX(1);} } @keyframes escape1 { from{} to{left: 1000px;} } @keyframes jump1 { from{top:390px; transform: rotate(-10deg);} to{top:350px; transform: rotate(10deg);} } @keyframes escape2 { from{} to{left: 1000px;} } @keyframes jump2 { from{top:400px; transform: rotate(-10deg);} to{top:360px; transform: rotate(10deg);} } @keyframes escape3 { from{} to{left: 1000px;} } @keyframes jump3 { from{top:390px; transform: rotate(-10deg);} to{top:350px; transform: rotate(10deg);} } @keyframes escape4 { from{} to{left: 1000px;} } @keyframes jump4 { from{top:400px; transform: rotate(-10deg);} to{top:360px; transform: rotate(10deg);} } @keyframes escape5 { from{} to{left: 1000px;} } @keyframes jump5 { from{top:400px; transform: rotate(-10deg);} to{top:360px; transform: rotate(10deg);} } @keyframes escape6 { from{} to{left: 1000px;} } @keyframes jump6 { from{top:400px; transform: rotate(-10deg);} to{top:360px; transform: rotate(10deg);} } @keyframes escape7 { from{} to{left: 1000px;} } @keyframes jump7 { from{top:400px; transform: rotate(-10deg);} to{top:360px; transform: rotate(10deg);} } @keyframes escape8 { from{} to{left: 1000px;} } @keyframes jump8 { from{top:440px; transform: rotate(-10deg);} to{top:400px; transform: rotate(10deg);} } @keyframes escape9 { from{} to{left: 1000px;} } @keyframes jump9 { from{top:440px; transform: rotate(-10deg);} to{top:400px; transform: rotate(10deg);} } @keyframes escape10 { from{} to{left: 1000px;} } @keyframes jump10 { from{top:440px; transform: rotate(-10deg);} to{top:400px; transform: rotate(10deg);} } </style> </head> <body> <div class="container"> <div class="box"> <div class="godzilla"></div> <div class="volcano"></div> <div class="cloud"></div> <div class="cloud2"></div> <div id="allpeople"> <div class="people1"></div> <div class="people2"></div> <div class="people3"></div> <div class="people4"></div> <div class="people5"></div> <div class="people6"></div> <div class="people7"></div> <div class="people8"></div> <div class="people9"></div> <div class="leader"></div> </div> </div> </div> <button class="btn1" onclick="run()">run</button> <script> function run() { var person = document.getElementById("allpeople"); person.querySelector(".people1").style.animation = "jump1 0.3s 0.5s infinite alternate, escape1 30s 0.5s infinite alternate"; person.querySelector(".people2").style.animation = "jump2 0.3s 1s infinite alternate, escape2 30s 1s infinite alternate"; person.querySelector(".people3").style.animation = "jump3 0.3s 1.5s infinite alternate, escape3 30s 1.5s infinite alternate"; person.querySelector(".people4").style.animation = "jump4 0.3s 2s infinite alternate, escape4 30s infinite 2s alternate"; person.querySelector(".people5").style.animation = "jump5 0.3s 2.5s infinite alternate, escape5 30s infinite 2.5s alternate"; person.querySelector(".people6").style.animation = "jump6 0.3s 3s infinite alternate, escape6 30s infinite 3s alternate"; person.querySelector(".people7").style.animation = "jump7 0.3s 3.5s infinite alternate, escape7 30s infinite 3.5s alternate"; person.querySelector(".people8").style.animation = "jump8 0.3s 4s infinite alternate, escape8 30s infinite 4s alternate"; person.querySelector(".people9").style.animation = "jump9 0.3s 4s infinite alternate, escape9 30s infinite 4.5s alternate"; person.querySelector(".leader").style.animation = "jump10 0.3s infinite alternate, escape10 30s infinite alternate"; } </script> </body> </html>