纯css实现点击背景博文扩散

最新推荐文章于 2025-03-19 13:42:47 发布

转载最新推荐文章于 2025-03-19 13:42:47 发布 · 741 阅读

本文介绍了一种使用纯CSS实现的按钮点击涟漪扩散动画效果。通过设置径向渐变背景并在激活状态下调整其大小及透明度来模拟水波纹扩散的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源于网络，忘记出处了

.ripple {
  position: relative;
  //隐藏溢出的径向渐变背景
  overflow: hidden;
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  //设置径向渐变
  background-image: radial-gradient(circle, rgb(153, 153, 153) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .3s, opacity .5s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  //设置初始状态
  transition: 0s;
}