css3 實現 波紋效果

css部分

.outter {
    animation-name: bubble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;	
}

.inner,.outter{
position: absolute;
top:20%;left:50%;
opacity: .7;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #d436cc;
transform: translate(-50%,-50%);
}

.inner {opacity: 1;}

@keyframes bubble {
 0% {
  transform:translate(-50%,-50%) scale(1);
  opacity:.3
 }
 25% {
  opacity:.3;
  transform:translate(-50%,-50%) scale(1.8)
 }
 100%,50% {
  opacity:0;
  transform:translate(-50%,-50%) scale(2)
 }
}

html部分

<div class="outter"></div>
<div class="inner"></div>

效果：