css制作波纹

使用CSS制作波纹效果

波纹效果可以通过CSS的伪元素和动画属性实现，以下是一种常见的实现方法：

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

.ripple {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 50%;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.ripple:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

点击触发波纹效果

如果需要点击时触发波纹效果，可以结合JavaScript：

<button class="ripple-button">点击我</button>

.ripple-button {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  background-color: #6200ee;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

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

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

    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size/2;
    const y = e.clientY - rect.top - size/2;

    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    this.appendChild(ripple);

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

纯CSS悬停波纹效果

不使用JavaScript，仅通过CSS实现悬停波纹效果：

<div class="hover-ripple">悬停查看效果</div>

.hover-ripple {
  position: relative;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #2196F3;
  color: white;
  overflow: hidden;
}

.hover-ripple:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
  animation: hover-ripple 1s ease-out;
}

@keyframes hover-ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

这些方法展示了不同场景下实现CSS波纹效果的技巧，可以根据具体需求选择合适的方式。