css3 animation 实现波纹动画

实现效果

bandicam 2020-02-24 15-32-19-193.gif

实现代码

//html
 <div class="coment">
                <div class="ima">
                    <div class="cc"></div>
                    <div class="cc cc1"></div>
                    <div class="cc cc2"></div>
                    <div class="cc cc3"></div>
                    <div class="cc cc4"></div>
                    <div class="image">
                        <img src="https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/img/friend-net.png" alt="">
                    </div>
                </div>
            </div>


//less
.coment {
      width: 1200px;
      height: 100vh;
      margin: 100px auto;
      background-color: purple;
      .ima {
        float: right;
        position: relative;
        width: 816px;
        height: 910px;
        background-color: #fff;
        .cc {
          position: absolute;
          width: 20px;
          height: 20px;
          opacity: 1;
          background-color: #9cdeff;
          border-radius: 50%;
          top: 50%;
          left: 49.5%;
          transform: translate(-50%, -50%);
          animation: circulmove 4s infinite linear;
        }
        .cc1 {
          animation: circulmove 4s 1s infinite linear;
        }
        .cc2 {
          animation: circulmove 4s 2s infinite linear;
        }
        .cc3 {
          animation: circulmove 4s 3s infinite linear;
        }
        .cc4 {
          animation: circulmove 4s 4s infinite linear;
        }
   
        .image {
          position: absolute;
          z-index: 999;
        }
      }
    }

@keyframes circulmove {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
  }

  100% {
    width: 816px;
    height: 910px;
    opacity: 0;
  }
}

项目解说

以上代码只是项目中的一部分,但是已经可以完全明了的解释以上的问题,可以直接赋值代码,查看效果,如果你在其中发现了什么问题,请慷慨提出来,大家一起进步