3.5.5 css 循环放大缩小波纹.md

3.5.5 css 循环放大缩小波纹

demo

<style>
body {background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 5rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position:relative;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  animation: ripple 3s linear infinite 1s;
}
.ripple::after {
  animation: ripple 3s linear infinite 2s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 8rem rgba(255,255,255, 0);
  }
}
</style>
<div class="ripple"></div>

demo

<div class="drink-btn-wrap">
    <div class="drink-btn-circle drink-btn-circle_one"></div>
    <div class="drink-btn-circle drink-btn-circle_two"></div>
    <div class="drink-btn-circle drink-btn-circle_three" >水</div>
  </div>
  
  
  .drink-btn-wrap {
    position: relative;
    height: 2.32rem;
    margin: 0.4rem 0;
    .drink-btn-circle {
      position: absolute;
      left: 50%;
      top: 50%;
      &_one {
        width: 2.32rem;
        height: 2.32rem;
        border-radius: 50%;
        margin-left: -1.16rem;
        margin-top: -1.16rem;
        background:  rgba(190,241,222, 0.25);
        -webkit-animation: living 3s 1.5s linear infinite;
        animation: living 3s 1.5s linear infinite;
      }
      &_two {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        background:  #BEF1DE;
        -webkit-animation: living 3s 3s linear infinite;
        animation: living 3s 3s linear infinite;
      }
      &_three {
        width: 1.68rem;
        height: 1.68rem;
        border-radius: 50%;
        margin-left: -0.84rem;
        margin-top: -0.84rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.32rem;
        background:  #30C58E;
      }
    }
  }
  @keyframes living {
  0%{
    transform: scale(1);
    opacity: 0.5;  
  }
  100%{
    transform: scale(1.5);  
    opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
  }
}