我想点击这个按钮时，让这个按钮四周有一片淡淡的波纹向外扩散，这个好做吗？像这样：谢谢！

https://codepen.io/xiamu/pen/... 还有挺多效果的可以在codepen.io上面找找看

一个css3动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wave{
               background: #FC7171;
               color: white;
               width: 200px;
               height: 200px;
               border-radius: 50%;
               border:none;
               outline: none;
               position: relative;              
            }
        .wave p{
            position: absolute;
            z-index: 7;
            text-align: center;
             display: block;
        }
            
        .animat::before,.animat::after{
          content:"";
          position:absolute;
         background: #FA7C7C;
          background-position:center center;
          border-radius:50%;         
        }
        .animat::before{
          z-index:2;
          animation:wave 2s ease-out infinite;
          -webkit-animation:wave 2s ease-out infinite;
        }
        .animat::after{
          z-index:3;
          animation:wave 2s ease-out .2s infinite;
          -webkit-animation:wave 2s ease-out .2s infinite;
        }
        @keyframes wave{
          0%{
            top: 50%;left: 50%;
            transform: translate(-50%, -50%) scale(1.4);
            width:30px;
            height:30px;
            opacity: 1;
          }
          50%{
            top: 50%;left: 50%;
            transform: translate(-50%, -50%) scale(1);
            width:240px;
            height:240px;
          }
          100%{
            top: 50%;left: 50%;
            transform: translate(-50%, -50%) scale(1);
            width:240px;
            height:240px;
            opacity: 0;
          }
        }
 
      
        </style>
    </head>
    <body>
        <button class="wave"><p>点击计数</p></button>
        <script>
            var btn = document.getElementsByTagName("button")[0];
            var timer;
            btn.onclick = function(){                    
                this.classList.add("animat");
                    if(timer){
                        clearInterval(timer);
                    }
                timer = setTimeout(function(){
                    this.classList.remove("animat");
                }.bind(this),2000);
            }
        </script>
    </body>
</html>

一个css3动画

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

图片沿着圆环的转动有什么方法吗？

点击dom节点里面的子元素，如何点击的是某个节点？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

如何用 CSS 实现卡片顶部内凹效果？