动感十足的水波涟漪，让你眼前一亮！纯CSS3实现的视觉盛宴！

2022-12-24 02:08:12

用CSS3打造水波涟漪动画：提升用户体验的视觉冲击

水波涟漪动画是一种令人着迷的视觉效果，它模拟了水面上石子扩散的涟漪。这种动画在数字交互中非常有效，因为它可以吸引注意力并引导用户点击。令人惊讶的是，仅仅使用纯CSS3，就可以实现这个令人惊叹的动画。让我们深入了解如何利用CSS3的力量，让你的按钮和界面生动起来。

HTML结构：建立动画容器

首先，创建一个HTML文件，在其中创建两个元素：一个用作动画容器的div元素和一个用于触发动画的按钮元素。

<div class="container">
  <button id="button" onclick="handleClick()">点击我</button>
</div>

CSS样式：设置动画属性

接下来，我们需要添加CSS样式，以设置涟漪动画的属性。

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

#button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0);
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

JavaScript代码：动态创建涟漪

最后，使用JavaScript来动态创建涟漪，当按钮被点击时触发。

const button = document.getElementById('button');

button.addEventListener('click', () => {
  const container = document.querySelector('.container');

  const ripple = document.createElement('div');
  ripple.classList.add('ripple');

  container.appendChild(ripple);

  setTimeout(() => {
    ripple.remove();
  }, 1000);
});