<div class="animate"> <a href="https://dwatow.github.io/">我是Chris</a></div>

$animate_time: .3s;

@keyframes moveBubble1 {
   0% { border: solid 1px #888;
    border-radius: 60% 40% 40% 60% / 50% 30% 70% 50%; } 
  25% { border: solid 1px #aaa;
    border-radius: 50% 50% 30% 70% / 60% 60% 40% 40%; } 
  50% { border: solid 1px #888;
    border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%; } 
  75% { border: solid 1px #aaa;
    border-radius: 30% 70% 50% 50% / 40% 40% 60% 60%; } 
 100% { border: solid 1px #888;
    border-radius: 60% 40% 40% 60% / 50% 30% 70% 50%; }
}

div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
 
  width: 75px;
  height: 75px;
  border: 1px solid #fff;  //for moobile device
  line-height: 75px;
  text-align: center;
 }

.animate { 
  width: 75px;
  height: 75px;
  // border-color: #fff;
  animation: moveBubble1 $animate_time infinite; 
 
 &::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 75px;
  height: 75px;
  transform: rotate(54deg);
  border: 1px solid #fff;  //for moobile device
  animation: moveBubble1 $animate_time .1s infinite; 
 }
 
 &::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 75px;
  height: 75px;
  transform: rotate(239deg);
  border: 1px solid #fff;  //for moobile device
  animation: moveBubble1 $animate_time .2s infinite; 
 }
 
}