css3——实现点击波纹效果

最新推荐文章于 2025-06-04 08:35:19 发布

原创

最新推荐文章于 2025-06-04 08:35:19 发布 · 6.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#波纹效果 #css #javascript #vue

本文介绍了如何使用纯CSS3创建点击波纹效果，通过伪元素`:after`定义波纹，结合`opacity`和`transition`属性实现动画。同时，也探讨了使用JavaScript（特别是Vue）来实现更精确的波纹定位，通过监听触屏和鼠标事件来改变波纹位置。

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

纯css实现波纹效果
说明：使用伪元素:after定义波纹效果，一开始opacity为0，用户不可见，点击后进入active状态，opacity变为0.3,不缩放,transition: 0s。退出active状态后，自然重新显示:after中的样式，opacity变为0，放大10倍，由于transition设置1s，故有一个肉眼可见的变化过程。
用户看到的效果：一个圆逐渐变大变淡，最后消失。
缺点：使用css实现的，无法定位鼠标位置，每次波纹出现的位置都是固定的。

<button class="btn ripple">Button</button>

.btn {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 4px;
  box-shadow: 0 0 10px gray;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
}

.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, #666 10%, transparent 20%);
    background-repeat: no-repeat;
    background-position: 50%;
    tra