SCSS
body {
background-color: #333;
}
.fidget {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 150px;
height: 150px;
overflow: hidden;
animation: rotate .85s linear infinite;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0) scale(2);
}
to {
transform: translate(-50%, -50%) rotate(360deg) scale(2);
}
}
.top, .center {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
&:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border: 2px solid #000;
border-radius: 50%;
background-color: #333;
content: '';
}
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index :2;
}
.top {
z-index: 2;
&:nth-child(1) {
top: 5px;
left: 50%;
transform: translate(-50%, 0);
}
&:nth-child(2) {
bottom: 25px;
right: 15px;
}
&:nth-child(3) {
bottom: 25px;
left: 15px;
}
}
.round {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
z-index: 1;
&:after {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
content: '';
}
&:nth-child(5) {
top: 35px;
left: 26px;
transform: rotate(-21deg);
&:after {
top: -15px;
left: -15px;
}
}
&:nth-child(6) {
top: 35px;
right: 26px;
transform: rotate(21deg);
&:after {
top: -15px;
right: -15px;
}
}
&:nth-child(7) {
bottom: 9px;
left: 50%;
transform: translate(-50%, 0);
&:after {
bottom: -15px;
}
}
}
