Welcome to CODEBOX! (Copy 2146)
✨ นายกฤติน กลิ่นแก้ว
<html> <head> <title>Let's Start </title> <style> body{ margin:0; padding:0; height:100vh; width:100vw; display:flex; justify-content:center; background:url('https://images3.alphacoders.com/966/thumb-1920-966315.png'); background-size:cover; overflow:hidden; } .ferris-wheel{ position:relative; width:396px; height:396px; bottom:-20vh; } .ferris-wheel .wheel-wrap{ position:absolute; left:0; right:0; top:0; bottom:0; animation: wheel-rotate 60s infinite linear; } .wheels{ position:absolute; border:6px solid #4c2a1e; width:396px; height:396px; border-radius:50%; box-sizing:border-box; } .wheels:before{ content: ''; position:absolute; z-index:1; left:50%; top:50%; width:324px; height:324px; margin-left:-162px; margin-top:-162px; border:6px solid #4c2a1e; border-radius:50%; box-sizing:border-box; } .wheels:after{ content: ''; position:absolute; z-index:2; left:50%; top:50%; width:114px; height:114px; margin-left:-57px; background-color:blue; margin-top:-57px; border:12px solid red; border-radius:50%; box-sizing:border-box; } .wheels span{ position:absolute; top:50%; left:0; width:100%; margin-top:-3px; border-bottom:6px solid #5a6d95; } .wheels span:nth-child(1){ transform:rotate(0deg); } .wheels span:nth-child(2){ transform:rotate(45deg); } .wheels span:nth-child(3){ transform:rotate(90deg); } .wheels span:nth-child(4){ transform:rotate(135deg); } @keyframes wheel-rotate{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } .buckets{ position:absolute; z-index:3; left:0; right:0; top:0; bottom:0; } .buckets .out{ position:absolute; top:50%; left:50%; width:70px; height:60px; border-radius:6px; transform-origin: 50% 5%; animation: buckets-rotate 60s infinite linear; } .buckets .out:before{ content:''; position:absolute; top:0; left:50%; width:30px; height:15px; margin: -10px 0 0 -15px; background-color:black; border-top-left-radius:10px; border-top-right-radius:10px; } .buckets .out span{ position:absolute; top:6px; left:6px; width:54px; height:30px; background-color:#b3dad7; border-left:3px solid #6f7d99; border-top:3px solid #5a6d95; } .buckets .out span:after{ content:''; position:absolute; top:100%; left:0; right:0; height:10px; background:rgba(0,0,0,.2); } .buckets .out:nth-child(1){ margin: -201px 0 0 -21px; background-color:red; } .buckets .out:nth-child(1){ margin: -201px 0 0 -21px; background-color:red; } .buckets .out:nth-child(2){ margin: -141px 0 0 117px; background-color:orange; } .buckets .out:nth-child(3){ margin: -6 0 0 174px; background-color:yellow; } .buckets .out:nth-child(4){ margin: 132px 0 0 117px; background-color:green; } .buckets .out:nth-child(5){ margin: 189px 0 0 -21px; background-color:blue; } .buckets .out:nth-child(6){ margin: 132px 0 0 -159px; background-color:purple; } .buckets .out:nth-child(7){ margin: -6px 0 0 -216px; background-color:magenta; } .buckets .out:nth-child(8){ margin: -141px 0 0 -159px; background-color:pink; } @keyframes buckets-rotate{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } .stand{ position:absolute; z-index:10; left:50%; top:50%; width:60px; height:60px; display:flex; justify-content:center; align-items:center; background-color:#453158; border-radius:50%; transform:translate(-50%,-50%); } .stand:before, .stand:after{ content:''; position:absolute; z-index:1; top:12px; width:300px; height:15px; background-color:#453158; } .stand:before{ right:40%; transform-origin:100% 50%; transform:rotate(-77deg); } .stand:after{ left:40%; transform-origin:0% 50%; transform:rotate(77deg); } .stand span{ position:relative; z-index:2; display:block; width:24px; height:24px; background:yellow; border-radius:50%; }; span .pic{ position:absolute; width:300px; height:30px; background-color:black; } </style> </head> <body> <div class="ferris-wheel"> <div class="wheel-wrap"> <div class="wheels"> <span></span> <span></span> <span></span> <span></span> </div> <div class="buckets"> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> <div class="out"><span><div class="pic"></div></span></div> </div> </div> <div class="stand"> <span></span> </div> </div> </body> </html>