css动画水波纹

CSS动画给网页带来了更加生动和丰富的展示效果，其中水波纹效果成为了最受欢迎的CSS动画之一。

  .ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0,0);
  }
  
  .ripple::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%,-50%) scale(0);
    border-radius: 50%;
    background-color: rgba(255,255,0.7);
  }
  
  .ripple:hover::before {
    transform: translate(-50%,-50%) scale(4);
    transition: transform 0.5s,width 0.5s,height 0.5s;
    width: 200px;
    height: 200px;
  }

以上代码就是实现水波纹效果的CSS样式，首先给容器设置relative和overflow:hidden属性，然后在容器前面添加一个伪元素，设置它的宽和高为0，使它不显示，当鼠标悬浮在容器上时，通过transform和scale属性将它放大。

此外，在:hover伪类样式中加入transition属性，使放大的过程有一个平滑的过渡效果，同时调整宽和高设置，让波纹扩散到整个容器。

通过以上代码，可以轻松实现水波纹效果，并且可以灵活调整波纹大小和颜色，让页面展示更加丰富多彩。