<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title>Infinity loop</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background: black;
}
div{
position: absolute;
border-radius: 100%;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(65deg);
z-index: 0;
}
.circle1{
height: 300px;
width: 300px;
border:4px solid #e5238f;
animation: infinity 3s linear 1s infinite;
z-index: 1;
}
.circle2{
height: 270px;
width: 270px;
border:4px solid #97e28e;
animation: infinity 3s linear .9s infinite;
z-index: 2;
}
.circle3{
height: 240px;
width: 240px;
border:4px solid #dfa631;
animation: infinity 3s linear .8s infinite;
z-index: 3;
}
.circle4{
height: 210px;
width: 210px;
border:4px solid green;
animation: infinity 3s linear .7s infinite;
z-index: 4;
}
.circle5{
height: 180px;
width: 180px;
border:4px solid aqua;
animation: infinity 3s linear .6s infinite;
z-index: 5;
}
.circle6{
height: 150px;
width: 150px;
border:4px solid blue;
animation: infinity 3s linear .5s infinite ;
z-index: 6;
}
.circle7{
height: 120px;
width: 120px;
border:4px solid #85c587;
animation: infinity 3s linear .4s infinite ;
z-index: 7;
}
.circle8{
height: 90px;
width: 90px;
border:4px solid #b18750;
animation: infinity 3s linear .3s infinite ;
z-index: 8;
}
.circle9{
height: 60px;
width: 60px;
border:4px solid #f4a6db;
animation: infinity 3s linear .2s infinite ;
z-index: 9;
}
.circle10{
height: 30px;
width: 30px;
border:4px solid #dfeaef;
animation: infinity 3s linear .1s infinite ;
z-index: 10;
}
@keyframes infinity{
50%{
transform: translateY(600px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="circle1">
</div>
<div class="circle2">
</div>
<div class="circle3">
</div>
<div class="circle4">
</div>
<div class="circle5">
</div>
<div class="circle6">
</div>
<div class="circle7">
</div>
<div class="circle8">
</div>
<div class="circle9">
</div>
<div class="circle10">
</div>
</div>
</body>
</html>
Comments
Post a Comment