css 写一个水波纹动画

可以使用CSS3的伪类和动画来实现水波纹动画，具体代码如下：

HTML代码：

<div class="ripple"></div>

CSS代码：

.ripple {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #007bff;
  overflow: hidden;
  border-radius: 50%;
}

.ripple:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  transition: all 0.5s ease-out;
}

.ripple:active:before {
  transform: scale(2);
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

这段代码会在圆形区域内产生一个白色的水波纹效果，当用户点击圆形区域时，水波纹会从点击位置开始扩散，最终消失。

相关问题

css 写一个水波纹动画，并永远循环播放

可以使用CSS3的伪元素和动画属性来实现水波纹动画，代码如下：

.wave {
  position: relative;
  overflow: hidden;
}

.wave::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: wave 2s linear infinite;
}

@keyframes wave {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% {
    width: 200%;
    height: 200%;
    opacity: 1;
  }
  100% {
    width: 400%;
    height: 400%;
    opacity: 0;
  }
}

将上述代码应用到HTML元素中，即可实现水波纹动画，并且永远循环播放。

css水波纹动画效果

可以使用CSS3的伪元素和动画属性来实现水波纹动画效果。具体实现步骤如下：

1. 创建一个容器元素，设置宽高和背景颜色。
2. 在容器元素中创建一个伪元素，设置宽高和圆角，使其成为一个圆形。
3. 使用CSS3的动画属性，设置伪元素的动画效果，包括动画名称、持续时间、延迟时间、动画方式等。
4. 在动画中，使用CSS3的变换属性，设置伪元素的缩放比例和透明度，使其呈现出水波纹效果。

以下是一个简单的示例代码：

<div class="ripple"></div>

.ripple {
  width: 200px;
  height: 200px;
  background-color: #009688;
  position: relative;
}

.ripple::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation-name: ripple;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-timing-function: ease-out;
}

@keyframes ripple {
  from {
    opacity: 1;
    width: 0;
    height: 0;
  }
  
  to {
    opacity: 0;
    width: 400px;    height: 400px;
  }
}