使用css实现一圈一圈的水波纹效果

要实现一圈一圈的水波纹效果，可以使用CSS3的animation属性和伪元素。具体步骤如下：

1. 首先，在HTML中创建一个div元素，并设置其样式为圆形：

<div class="circle"></div>

2. 然后，在CSS中定义.circle的样式，包括宽度、高度、背景颜色和圆角：

.circle {
  width: 100px;
  height: 100px;
  background-color: #008cba;
  border-radius: 50%;
}

3. 接下来，使用伪元素:before创建一个圆形的水波纹效果。将其位置设置在div的中心，将其宽度、高度、透明度和边框设置为0，并将其border-radius设置为50%：

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  border: 2px solid #008cba;
  border-radius: 50%;
}

4. 使用animation属性设置动画效果，将水波纹逐渐扩大并淡出。在这里，我们设置动画持续时间为2秒，并使用ease-out的时间函数使其在结束时逐渐减速：

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  border: 2px solid #008cba;
  border-radius: 50%;
  animation: ripple 2s ease-out;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

5. 最后，使用animation-delay属性为每个水波纹设置不同的延迟时间，使其呈现出一圈一圈的效果。在这里，我们设置每个水波纹的延迟时间为0.5秒：

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  border: 2px solid #008cba;
  border-radius: 50%;
  animation: ripple 2s ease-out;
  animation-delay: 0.5s;
}

.circle:before:nth-child(2) {
  animation-delay: 1s;
}

.circle:before:nth-child(3) {
  animation-delay: 1.5s;
}

完整的代码如下：

<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  background-color: #008cba;
  border-radius: 50%;
}

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  border: 2px solid #008cba;
  border-radius: 50%;
  animation: ripple 2s ease-out;
  animation-delay: 0.5s;
}

.circle:before:nth-child(2) {
  animation-delay: 1s;
}

.circle:before:nth-child(3) {
  animation-delay: 1.5s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}