css3——实现点击波纹效果

最新推荐文章于 2021-07-27 22:20:11 发布

Astar_小白的成长之路

最新推荐文章于 2021-07-27 22:20:11 发布

阅读量6.3k

点赞数 4

分类专栏： css javascript 文章标签：波纹效果 css javascript vue

本文链接：https://blog.csdn.net/Tracy_frog/article/details/82861150

版权

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

摘要由CSDN通过智能技术生成

纯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-i