<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);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.