<div class="box">
<div class="circles"></div>
<h1>10</h1>
<h3>billion</h3>
<p>transactions</p>
</div>
.box {
display: flex;
text-align: center;
position: relative;
width: 250px;
height: 280px;
flex-flow: column;
justify-content: center;
align-items: center;
}
.circles {
opacity:0;
top: 0;
border-radius:50%;
border:2px solid yellow;
height: 100%;
width: 100%;
position:absolute;
}
.circles:before {
content:'';
top: 0;
border-radius:50%;
border:2px solid green;
height: 100%;
width: 100%;
position:absolute;
left: 0;
}
.circles:after {
content:'';
top: 0;
border-radius:50%;
border:2px solid blue;
height: 100%;
width: 100%;
position:absolute;
left: 0;
}
.box:hover .circles {
animation: 2s rotate infinite linear;
}
.box:hover .circles:before {
animation: 3s rotate infinite linear ;
}
.box:hover .circles:after {
animation: 4s rotate infinite linear ;
}
@keyframes rotate {
from {
opacity:1;}
to {
opacity:1;
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.