HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ani.css">
</head>
<body>
<div class="container circle">
<div class="main one"></div>
<div class="main two"></div>
<div class="big circle one"></div>
<div class="big circle two"></div>
<div class="small circle one"></div>
<div class="small circle two"></div>
</div>
<h2>If you liked it, check out the<a href="https://coodingwitharshad.blogspot.com/">accompanying blog post</a>a></h2>h2>
</body>
</html>
CSS SOURCE CODE
body { background:linear-gradient(290deg,hotpink,red,greenyellow,skyblue);}
.container {width:300px;
height:300px;
position:relative;
margin:50px auto;
overflow:hidden;
animation:rotate 5s linear infinite;
border:1px solid black;}
.circle { border-radius:50%;}
.one:after, .two:after { animation:rotate 2.5s linear infinite reverse;}
.one:after { background-image: url(image/a4.jpg);}
.main {width:100%;
height:50%;}
.main.two { top:50%;}
.one { transform:rotate(0deg);}
.two { transform:rotate(180deg);}
.main, .big, .small { position:absolute; overflow:hidden;}
.main:after, .big:after, .small:after { content:'';
position:absolute;
top:0; left:0;
width:300px; height:300px;
background-size:100% 100%;}
.big {width:50%;
height:50%;
top:25%;
left:50%;}
.big.two { left:0;}
.big:after { top: -50%; left: -100%;}
.small {width:25%;
height:25%;
top:37.5%;
left:12.5%;}
.small.two { left:62.5%;}
.small:after { top: -150%; left: -50%;}
@keyframes rotate {
to { transform:rotate(360deg); } }
h2 {max-width:400px;
margin:150px auto;
color:darkgrey;
text-align:center;}
a{
color: green;
}
