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元素中，即可实现水波纹动画，并且永远循环播放。

vue 写一个水波纹循环动画

好的，下面是一个简单的 Vue 水波纹循环动画实现：

1. 首先，我们需要在 Vue 的 `template` 中添加一个 `div` 元素，作为容器来显示水波纹动画：

<template>
  <div class="ripple-container">
    <div class="ripple"></div>
  </div>
</template>

2. 然后，在 `style` 标签中添加样式，使容器和水波纹的位置、大小、颜色等属性符合我们的需求：

<style>
  .ripple-container {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ccc;
  }
  
  .ripple {
    position: absolute;
    width: 0;
    height: 0;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    opacity: 0.7;
    animation: ripple 2s linear infinite;
  }
  
  @keyframes ripple {
    from {
      width: 0;
      height: 0;
      opacity: 0.7;
    }
    to {
      width: 400px;
      height: 400px;
      opacity: 0;
    }
  }
</style>

3. 最后，在 Vue 的 `script` 中添加逻辑代码，使水波纹动画循环播放：

<script>
  export default {
    name: 'RippleAnimation',
    created() {
      setInterval(() => {
        const ripple = document.querySelector('.ripple');
        ripple.classList.remove('ripple');
        void ripple.offsetWidth;
        ripple.classList.add('ripple');
      }, 2000);
    },
  };
</script>

以上就是一个简单的 Vue 水波纹循环动画实现。需要注意的是，为了实现动画循环播放，我们在 `created()` 生命周期中使用 `setInterval()` 定时器来不断地重复添加、移除类名，以触发动画效果。