console
gsap.to(".buckets div span",{backgroundColor:"orange",stagger:1});
<div class="ferris-wheel">
<div class="wheel-wrap">
<div class="wheels">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="buckets">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</div>
<div class="stand"><span></span></div>
</div>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #FCE69D;
}
.ferris-wheel {
position: relative;
width: 502px;
height: 502px;
}
.ferris-wheel .wheel-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
animation: wheel_rotate 30s infinite linear;
}
.wheels {
position: absolute;
border: 5px solid #333;
width: 502px;
height: 502px;
border-radius: 50%;
box-sizing: border-box;
}
.wheels:before {
content: '';
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
width: 408px;
height: 408px;
margin-left: -204px;
margin-top: -204px;
border: 5px solid #333;
border-radius: 50%;
box-sizing: border-box;
}
.wheels:after {
content: '';
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
width: 90px;
height: 90px;
margin-left: -49px;
margin-top: -49px;
background-color: #333;
border: 4px solid #333;
border-radius: 50%;
box-sizing: border-box;
z-index:100 ;
}
.wheels span {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -1px;
border-bottom: 5px solid #59402B;
}
.wheels span:nth-child(1) {
transform: rotate(0deg);
}
.wheels span:nth-child(2) {
transform: rotate(22.5deg);
}
.wheels span:nth-child(3) {
transform: rotate(45deg);
}
.wheels span:nth-child(4) {
transform: rotate(67.5deg);
}
.wheels span:nth-child(5) {
transform: rotate(90deg);
}
.wheels span:nth-child(6) {
transform: rotate(112.5deg);
}
.wheels span:nth-child(7) {
transform: rotate(135deg);
}
.wheels span:nth-child(8) {
transform: rotate(157.5deg);
}
@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 div {
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 52px;
border-radius: 05px;
transform-origin: 50% 5%;
border:1px solid black;
animation: bucket_rotate 30s infinite linear;
}
.buckets div:before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 15px;
height: 15px;
margin: -15px 0 0 -3px;
background-color: #333;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.buckets div span {
position: absolute;
left: 20px;
top: 15px;
width: 20px;
height: 20px;
background-color: #c9dfdd;
border-left: 1px solid black;
border-top: 1px solid black;
}
.buckets div span:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 2px;
background-color: rgba(0,0,0,.2);
}
@keyframes bucket_rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.buckets div:nth-child(1) {
margin: -250px 0 0 -30px;
}
.buckets div:nth-child(2) {
margin: -231px 0 0 70px;
}
.buckets div:nth-child(3) {
margin: -178px 0 0 150px;
}
.buckets div:nth-child(4) {
margin: -95px 0 0 200px;
}
.buckets div:nth-child(5) {
margin:-2px 0 0 220px;
}
.buckets div:nth-child(6) {
margin: 95px 0 0 203px;
}
.buckets div:nth-child(7) {
margin: 174px 0 0 145px;
}
.buckets div:nth-child(8) {
margin: 230px 0 0 67px;
}
.buckets div:nth-child(9) {
margin: 250px 0 0 -30px;
}
.buckets div:nth-child(10) {
margin: 220px 0 0 -120px;
}
.buckets div:nth-child(11) {
margin: 175px 0 0 -210px;
}
.buckets div:nth-child(12) {
margin: 90px 0 0 -260px;
}
.buckets div:nth-child(13) {
margin: -4px 0 0 -280px;
}
.buckets div:nth-child(14) {
margin: -100px 0 0 -260px;
}
.buckets div:nth-child(15) {
margin: -180px 0 0 -210px;
}
.buckets div:nth-child(16) {
margin: -230px 0 0 -130px;
}
.buckets div:nth-child(odd) {
background-color:#1E9A9B;
}
.buckets div:nth-child(even) {
background-color: #E1020F;
}
.stand {
position: absolute;
z-index: 10;
left:49%;
top: 49%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.stand:before,
.stand:after {
content: '';
position: absolute;
z-index: 1;
top: 10px;
width: 400px;
height: 10px;
background-color: #333;
z-index: -100;
}
.stand:before {
right: 50%;
transform-origin: 100% 50%;
transform: rotate(-77deg);
}
.stand:after {
left: 50%;
transform-origin: 0% 50%;
transform: rotate(77deg);
}