پیشنمایش زنده
کد HTML
<div class="illusion"></div>
<a
style="color:#000"
href="https://codepen.io/uzcho_/pens/popular/?grid_type=list"
class="me"
></a>
کد CSS
.illusion {
background: linear-gradient(90deg, #595959, #fff);
width: 150px;
height: 150px;
top: 50%;
left: 50%;
display: block;
position: absolute;
border-radius: 50%;
animation: rotation 5s linear infinite;
}
.illusion:before {
background: linear-gradient(270deg, #595959, #fff);
width: 130px;
height: 130px;
top: 10px;
right: 0;
display: block;
position: absolute;
content: "";
border-radius: 50%;
}
.illusion:after {
background: #fff;
width: 110px;
height: 110px;
top: 20px;
left: 20px;
display: block;
position: absolute;
content: "";
border-radius: 50%;
}
@keyframes rotation {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}