css3 animation 实现波纹动画

实现效果

实现代码

//html
 

                

                    

                    

                    

                    

                    

                    

                        
                    
                
            


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

项目解说

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