<div class="top">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"><div class="square">
</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"><div class="square">
</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="left">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"><div class="square">
</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"><div class="square">
</div></div>
</div>
</div>
</div>
</div>
</div>
@dark : #354b60;
@green : #2ecc71;
@90 : 90deg;
body{
background: @dark;
}
.square{
width: 8px;
height: 30px;
background: @green;
border-radius: 10px;
display:block;
/*margin:10px;*/
-webkit-animation:turn 2.5s ease infinite;
animation:turn 2.5s ease infinite;
}
.top{
position: absolute;
left: 40%;
top: 50%;
-webkit-transform:rotate(@90);
transform:rotate(@90);
}
.bottom{
position: absolute;
left: 40%;
top: 50%;
-webkit-transform:rotate(-@90);
transform:rotate(-@90);
}
.left{
position: absolute;
left: 40%;
top: 50%;
}
.right{
position: absolute;
left: 40%;
top: 50%;
-webkit-transform:rotate(-@90*2);
transform:rotate(-@90*2);
}
@-webkit-keyframes turn{
0%{transform:translateX(0) translateY(0) rotate(0);}
50%{transform: translateX(400%) translateY(100%) rotate(@90);}
100%{transform: translateX(0) translateY(0) rotate(0);}
}
@keyframes turn{
0%{transform:translateX(0) translateY(0) rotate(0);}
70%{transform: translateX(400%) translateY(100%) rotate(@90);}
100%{transform: translateX(0) translateY(0) rotate(0);}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.