帮我写一个css水波纹的样式

好的，我可以为你提供一个css水波纹的样式： .ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .5s, opacity 1s;
}.ripple:active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s;
}

相关问题

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()` 定时器来不断地重复添加、移除类名，以触发动画效果。

使用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;
  }
}