Double ring animation

Nice double ring animation built with HTML and CSS/LESS.

You can see CODEPEN demo here.

Code below:

HTML

Place main div that contains the animation

<div class="hoja">CODEPEN</div>

CSS/LESS

The following less code creates double ring animation:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

@D:280px; // size control // diametro

@R:(@D/2); // radio

@B:(@R/8);

@O: 0.6; // opacity

@A: 2s; // accelerate

html,
body{
height: 100%;
}

body{
overflow: hidden;
}

.hoja{
color: rgb(220,220,226);
position:absolute;
top:50%; left:50%;
margin-left:[email protected];
margin-top:[email protected];
width:@D;
height:@D;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/4;
line-height:@D;
-webkit-font-smoothing: antialiased;
}

.hoja:after,
.hoja:before{
content:"";
border-radius:100%;
position:absolute;
top:0; left:0;
width:100%;
height:100%;
transform-origin:center center;
}

.hoja:after{
box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
inset @B 0 0 rgba(250, 200, 0, @O),
inset 0 [email protected] 0 rgba(250, 150, 0, @O),
inset [email protected] 0 0 rgba(250, 100, 0, @O);
animation: rotar @A -0.5s linear infinite;
}

.hoja:before{
box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
inset @B 0 0 rgba(0, 200, 200, @O),
inset 0 [email protected] 0 rgba(0, 150, 200, @O),
inset [email protected] 0 0 rgba(0, 200, 250, @O);
animation: rotarIz @A -0.5s linear infinite;
}

@keyframes rotar{
0%{
transform:rotateZ(0deg) scaleX(1) scaleY(1);
}
50%{
transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100%{
transform:rotateZ(360deg) scaleX(1) scaleY(1);
}
}

@keyframes rotarIz{
0%{
transform:rotateZ(0deg) scaleX(1) scaleY(1);
}
50%{
transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100%{
transform:rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply