css3 animation 實現波紋動畫

實現效果

實現代碼

//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;
  }
}

項目解說

以上代碼只是項目中的一部分,可是已經能夠徹底明瞭的解釋以上的問題,能夠直接賦值代碼,查看效果,若是你在其中發現了什麼問題,請慷慨提出來,你們一塊兒進步