SOURCE

console 命令行工具 X clear

                    
>
console
<div class="button">
  <div class="status"></div>
</div>
.button {
  width: 100px;
  height: 100px;
  border: 1px solid #0D96F2;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: #0D96F2;
  margin: 0 auto;
}
.button .status {
  position: absolute;
  width: 250%;
  height: 250%;
  top: -200%;
  left: -70%;
  border-radius: 40%;
  background: white;
  animation: wave 5s infinite;
  animation-timing-function: cubic-bezie(.28,.93,.71,.38);
}
.button:hover .status {
  transform: scale(1,1);
}
@keyframes wave {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}