CSS实战 - 波纹扩散效果

/* 波纹扩散效果 */
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
 
.ripple:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* 初始尺寸 */
  height: 150%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3); /* 波纹颜色 */
  background-clip: padding-box;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}
 
.ripple:active:after {
  transform: scale(1);
  opacity: 1;
  transition-duration: 0s;
}

这段代码定义了一个.ripple类，用于创建点击时的波纹扩散效果。它使用:after伪元素来实现水波效果，通过改变transform和opacity属性的过渡时间来实现点击瞬间的效果。通过设置pointer-events: none;，伪元素不会影响到元素的事件触发，确保了点击事件可以正常传递给底层元素。