Team C sspim Week 5 myFamily (Branch 8316)
✨ นายยุทธศิลป์ บุตรโยจันโท
<html> <head> <style> body{ display:flex; justify-content:center; background: #EEE6D6; overflow:hidden; } .world{ background: #EEE6D6; width: 800px; height:700px; top:5%; position: absolute; overflow: hidden; } .sun{ width: 200px; height: 200px; position: relative; background-image:url(https://cdn.discordapp.com/attachments/798209355266523216/809816442513915935/color.png); background-size: 200px 200px; top:10px; left: 20px; border-radius: 50%; filter: drop-shadow(0 0 30px orange); animation:wibwub 5s infinite ,updown 3s infinite alternate; } .ppim{ position:absolute; bottom:0%; right:-150%; width:200px; height:200px; background-image:url(https://i.pinimg.com/originals/b3/ca/39/b3ca390fa0f733a43666994e6525631f.png); background-size: 200px 200px; animation:swim 10s infinite,wiggle 1s infinite; } #shin { position:absolute; top:180px; left:-150%; animation:miws 7s infinite; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #fah{ position:absolute; top:100px; left:-150%; animation:miws 7s infinite; animation-delay: 2.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #jell{ position:absolute; top:250px; left:-150%; animation:miws 7s infinite; animation-delay: 10.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #zacc{ position:absolute; top:250px; left:-150%; animation:miws 7s infinite; animation-delay: 4.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #ice{ position:absolute; top:180px; left:-300px; animation:miws 7s infinite; animation-delay: 5.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #vee{ position:absolute; top:70px; left:-150%; animation:miws 7s infinite; animation-delay: 15.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #ria{ position:absolute; top:100px; left:-150%; animation:miws 7s infinite; animation-delay: 6.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } #fluke{ position:absolute; top:35px; left:-150%; animation:miws 7s infinite; animation-delay: 14.2s; animation-timing-function:cubic-bezier(0,.78,.55,.39); } .fish-body { position: absolute; top:250px; left:100px; z-index:1; margin-top: 30px; margin-left: 40px; background-image: pink; border-radius: 50%; width: 150px; height: 100px; display: flex; } .fish-body img{ width:50%; height:50%; position:absolute; border-radius: 50%; width: 150px; height: 100px; } .tail { margin-top: -100px; background-color: pink; border-radius: 50%; transform: rotate(40deg); width: 60px; height: 40px; position: absolute; top:390px; left:100px; z-index:1; } .tailbot { margin-top: -100px; background-color: pink; border-radius: 50%; transform: rotate(-40deg); width: 60px; height: 40px; position: absolute; top:420px; left:100px; z-index:1; } @keyframes swim{ from{ right: -20%; } to{ right: 100%; } } @keyframes miws{ from{ left:-150%; } to{ left:100%; } } @keyframes wiggle { 0% { transform: rotate(0deg); } 80% { transform: rotate(0deg); } 85% { transform: rotate(10deg); } 95% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } } .block:nth-child(1){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:100px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:0.3s; } .block:nth-child(2){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:150px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:0.5s; } .block:nth-child(3){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:150px; left:-150px; border-radius:200px; animation:move 30s infinite; } .block:nth-child(4){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:50px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:5.3s; } .block:nth-child(5){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:100px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:5.5s; } .block:nth-child(6){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:100px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:5s; } .block:nth-child(7){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:50px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:10.3s; } .block:nth-child(8){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:100px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:10.5s; } .block:nth-child(9){ width:150px; height:70px; position:absolute; background:linear-gradient(120deg,hsl(0,100%,100%,0.8),white); top:100px; left:-150px; border-radius:200px; animation:move 30s infinite; animation-delay:10s; } @keyframes move{ from{ left:-150px; } to{ left:1700px; } } .sea{ width:100%; position:absolute; background-color:#008CFF; bottom:0; display:flex; height: 67%; } @keyframes waving{ from{ transform: translatex(-40px) translatey(-10px); } to{ transform: translatex(0px) translatey(0px); } } @keyframes waving3{ 50%{ transform: translateY(10px) } } @keyframes wibwub{ 50% { filter: drop-shadow(0 0 30px red); } } .wave:nth-child(1){ background-image:url(https://raw.githubusercontent.com/wywnc/imgdump/2e2012a17539bcce27d6b62ff6f8a49fcfecddc2/lgtblue_wave.svg); background-size: 100%; width:120%; height:100%; top: -50px; position: absolute; background-repeat: no-repeat; animation: waving 4s infinite alternate; } .wave:nth-child(2){ background-image:url(https://raw.githubusercontent.com/wywnc/imgdump/2e2012a17539bcce27d6b62ff6f8a49fcfecddc2/midblue_wave.svg); background-size: 100%; width:120%; top:-15px; height:100%; position: absolute; background-repeat: no-repeat; animation: waving 2s infinite alternate; } .wave:nth-child(3){ background-image:url(https://raw.githubusercontent.com/wywnc/imgdump/2e2012a17539bcce27d6b62ff6f8a49fcfecddc2/dkblue_wave.svg); background-size: contain; width:120%; height:100%; position: absolute; background-repeat: no-repeat; animation: waving3 2.5s infinite alternate; } .deep{ background:linear-gradient(#008CFF, #8C7CA2 90%, #D8826D 120%); position: absolute; width: 100%; height: 80%; bottom:0; } .bubble { --width:45px; --size:45px; width: var(--width); height: var(--size); border-radius: 100%; position: absolute; z-index:200; box-shadow: 0px 0px 12px #ffffff; animation: bub 5s infinite linear; } @keyframes bub{ 0% { top: 120vh; opacity: 0; } 50% { top: 50vh; opacity: 1; } 100% { top: -10vh; transform: translateX(-100px); opacity: 0; } } @keyframes updown{ from{ top: 200px; } to{ top: 10px; } } </style> </head> <body> <div class="world"> <div class="sun"></div> <div class="clouds"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="sea"> <!--vector source: https://www.freepik.com/free-vector/stylish-marine-sea-waves-different-shapes-set_8865996.htm#query=sea-wave&position=3--> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="deep"> <div class="bubble" style="left:5%;animation-duration:8s"></div> <div class="bubble" style="left:15%;animation-duration:9s;--width:10px;--size:10px;"></div> <div class="bubble" style="left:25%;animation-duration:10s"></div> <div class="bubble" style="left:35%;animation-duration:11s;--width:25px;--size:25px;"></div> <div class="bubble" style="left:45%;animation-duration:7s;--width:10px;--size:10px;"></div> <div class="bubble" style="left:55%;animation-duration:17s"></div> <div class="bubble" style="left:65%;animation-duration:14s;--width:25px;--size:25px;"></div> <div class="bubble" style="left:75%;animation-duration:15s;--width:10px;--size:10px;"></div> <div class="bubble" style="left:85%;animation-duration:10s"></div> <div class="bubble" style="left:95%;animation-duration:11s;--width:25px;--size:25px;"></div> <div class="ppim"></div> </div> </div> <div class="fish" id="shin"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845151581212377088/80032025_2576484465800743_293932417683554304_n.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> <div class="fish" id="fah"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845155554354528256/unknown.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> <!-- Goodluck my friends! <div class="fish" id="jell"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/798209355266523216/804016601493405696/208a0bcbfb42b81a.jpg"></div> <div class="tail"></div> <div class="tailbot"></div> </div> --> <div class="fish" id="zacc"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845151747039166523/136052763_2880574088930298_445539556328288033_n.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> <div class="fish" id="ice"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845151005930291220/84407283_2609958639286239_6357058296846745600_n.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> <div class="fish" id="vee"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845152216797151232/105632488_2765323110350800_148719839803135424_n.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> <div class="fish" id="ria"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845151098041270291/121625259_1169567660105919_3343178228275797037_n.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> <div class="fish" id="fluke"> <div class="fish-body"> <img src="https://cdn.discordapp.com/attachments/845150282173251614/845159121849810944/68304057_2486115964940650_8303070805722398720_n.png"></div> <div class="tail"></div> <div class="tailbot"></div> </div> </div> </body> </html>