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>