当前位置：首页 > CSS

css制作波纹

2026-02-12 22:53:49CSS

使用 CSS 动画制作波纹效果

通过 CSS 动画和 transform 属性可以实现简单的波纹扩散效果。以下是一个基础实现方法：

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

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

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 150, 255, 0.5);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 1.5s ease-out;
}

@keyframes ripple-animation {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

通过伪元素优化实现

利用伪元素可以减少 DOM 元素数量：

css制作波纹

.ripple-button {
  position: relative;
  overflow: hidden;
}

.ripple-button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10.1%);
  background-size: 10000% 10000%;
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.ripple-button:active::after {
  background-size: 0 0;
  opacity: 0.4;
  transition: 0s;
  transform: scale(10);
}

JavaScript 交互增强

结合 JavaScript 实现点击触发的动态波纹：

css制作波纹

document.querySelector('.ripple-button').addEventListener('click', function(e) {
  const ripple = document.createElement('span');
  ripple.classList.add('ripple-effect');

  const rect = this.getBoundingClientRect();
  const size = Math.max(rect.width, rect.height);

  ripple.style.width = ripple.style.height = `${size}px`;
  ripple.style.left = `${e.clientX - rect.left - size/2}px`;
  ripple.style.top = `${e.clientY - rect.top - size/2}px`;

  this.appendChild(ripple);

  setTimeout(() => ripple.remove(), 600);
});

配套 CSS：

.ripple-button {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

使用 CSS 变量控制参数

通过 CSS 变量实现可配置的波纹效果：

:root {
  --ripple-color: rgba(255, 255, 255, 0.6);
  --ripple-duration: 0.6s;
  --ripple-scale: 4;
}

.ripple {
  /* ...其他样式... */
  background: var(--ripple-color);
  animation: ripple var(--ripple-duration) linear;
}

@keyframes ripple {
  to {
    transform: scale(var(--ripple-scale));
    opacity: 0;
  }
}

这些方法提供了从简单到复杂的多种实现方案，可根据具体需求选择适合的方式。现代浏览器都支持这些 CSS 特性，但如需兼容旧版浏览器可能需要添加前缀或降级方案。