代码

//html code
<div class="ripple" title="谢谢点赞~~">
   <span>2021</span>
</div>

样式

 .ripple {
   box-sizing: border-box;
   position: relative;
   width: 40px;
   height: 40px;
   margin: 50px;
   background: pink;
 }

.ripple::before {
  animation: ripple 2s ease-out infinite;
  border: solid 1px red;
  bottom: 0;
  box-sizing: border-box;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.ripple::after {
  animation: ripple 2s 1s ease-out infinite;
  border: solid 1px #09c;
  bottom: 0;
  box-sizing: border-box;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

// 动画效果
@keyframes ripple {
  0% {
    opacity: .25;
  }

  100% {
    opacity: 0;
    transform: scale(3);
	}
}