废话少说，先上代码了，复制到html中即可使用

点击查看代码 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      .btn,

      .btn2 {

        position: relative;

        width: 150px;

        height: 60px;

        background: #409eff;

        outline: 0;

        border: none;

        padding: 12px 20px;

        overflow: hidden;

        color: #fff;

      }

      .btn::before,

      .btn2::before {

        content: '';

        display: block;

        position: absolute;

        width: 100%;

        height: 100%;

        left: 0;

        top: 0;

        transition: 0.2s;

        background: #fff;

        opacity: 0;

      }

      .btn:active::before,

      .btn2:active::before {

        opacity: 0.2;

      }

      .btn::after {

        content: '';

        display: block;

        position: absolute;

        width: 200%;

        height: 100%;

        left: var(--x, 0);

        top: var(--y, 0);

        background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);

        background-repeat: no-repeat;

        background-position: 50%;

        transform: translate(-50%, -50%) scale(10);

        opacity: 0;

        transition: transform 0.8s, opacity 0.8s;

      }

      .btn:active::after {

        transform: translate(-50%, -50%) scale(0);

        opacity: 0.3;

        transition: 0s;

      }

      .btn2::after {

        content: '';

        display: block;

        position: absolute;

        background: rgb(255, 255, 255, 0.7);

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        opacity: 0;

        transition: all 0.8s, opacity 0.8s;

      }

      .btn2:active::after {

        left: var(--l, 0);

        right: var(--r, 0);

        opacity: 0.3;

        transition: 0s;

      }

    </style>

  </head>

  <body>

    <!-- 水波纹扩散 -->

    <button class="btn">水波纹散开</button>

    <!-- 两边扩散 -->

    <button class="btn2">两边散开</button>

  </body>

  <script>

    (() => {

      const el = document.querySelector('.btn');

      el.addEventListener('mousedown', e => {

        const { left, top } = el.getBoundingClientRect();

        el.style = `--x:${e.clientX - left}px;--y:${e.clientY - top}px`;

      });

      const el2 = document.querySelector('.btn2');

      el2.addEventListener('mousedown', e => {

        const { left, right } = el2.getBoundingClientRect();

        el2.style = `--l:${e.clientX - left}px;--r:${right - e.clientX}px`;

      });

    })();

  </script>

</html>

原理，通过监听按下事件，获取到点击坐标，将获取到的坐标通过style代入到自定义变量中，css中写入相关样式，引用伪元素，只需改变点击坐标点即可

总结，网上水波纹的例子有许多，但很多都不完善，如连续点击后水波纹会失效，本文已优化，并通过自定义css变量来实现，相对于较简单

css实现按钮点击水波纹效果和两边扩散效果的更多相关文章

  1. Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单

    Android特效专辑(十)--点击水波纹效果实现,逻辑清晰实现简单 这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推 ...

  2. android 点击水波纹效果

    这里是重点,<ripple>是API21才有的新Tag,正是实现水波纹效果的; 其中<ripple android:color="#FF21272B" .... ...

  3. C++实现水波纹、火焰和血浆效果

    点击这里查看原文 Code Project着火了! 整个工程有三个类,它们可以让你在图象上添加一些很酷的效果. 我把这些文件都放到我的代码压缩包里面了,并且做了一个小工程来让一些人使用起来更方便,但是 ...

  4. css实现按钮点击效果(超简单)

    在html中设置class: <button class="button1">click</button> css中如下所示: .button1{    p ...

  5. css实现鼠标滑过出现从中间向两边扩散的下划线

    这个效果一开始我是在华为商城页面上看到的,刚开始还以为挺复杂,实现的时候还有点没头绪.不过,还好有百度,借此记录一下我在导航条上应用的实现方法. 主要是借助了伪元素,代码如下: <div cla ...

  6. Android5.0以上的项目都会有的按钮点击特效--水波纹

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  7. Android点击Button水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...

  8. Android 水波纹点击效果(Ripple Effect)

    上周Android发布了Android M的Preview版本.但想必Android5.0很多炫酷效果,多数开发者还没有使用过,那更不要说广大用户了. 本文介绍的是Android5.0中其中一个炫酷的 ...

  9. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  10. Android自定义View——贝塞尔曲线实现水波纹效果

    我们使用到的是Path类的quadTo(x1, y1, x2, y2)方法,属于二阶贝塞尔曲线,使用一张图来展示二阶贝塞尔曲线,这里的(x1,y1)是控制点,(x2,y2)是终止点,起始点默认是Pat ...

随机推荐

  1. 吴X凡绯闻女友小怡同学被骂到清空社交平台？各大平台连敏感词库都没有的吗？

    敏感词都没有的平台 最近某加拿大籍贯的 rapper 被曝私生活不检点,且极有可能涉及诱X未成年少女,成为一个 raper. 当然至于是否属实,其实一个人是否是海王,微信.QQ 聊天记录里面记得清清楚 ...

  2. Keil MDK STM32系列(十) Ubuntu下的PlatformIO开发环境

    Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...

  3. 【Unity3D】顶点和片元着色器

    1 前言 ​ 上文介绍了渲染管线.固定管线着色器和表面着色器,如下: 渲染管线 固定管线着色器一 固定管线着色器二 表面着色器 ​ 固定管线着色器通过命令方式实现光照和贴图等效果,表面着色器通过给 S ...

  4. Python中矩阵运算（基于numpy包）

    1 乘法 在数组中,a * a计算对应元素相乘(矩阵点乘):在矩阵中,A*A计算矩阵乘法 np.multiply()计算对应元素相乘(矩阵点乘) np.dot()计算矩阵乘法 import numpy ...

  5. linux删除目录下指定文件方法

    1.删除当前目录下文件名含有2013的文件 ls | grep  2013 | xargs rm --To be continue...

  6. ultraISO方式制作win10安装U盘

    说明 最近帮朋友安装下win10,用了2种制作U盘启动盘的方式.记录一下也方便大家少走弯路. 准备的工具: 1.utralISO(软通牒) 2.win10镜像 3.16GB U盘,U盘容量 > ...

  7. java怎么打印一个对象的内存地址

    在Java一般使用HashCode来代表对象的地址,但是两个相同的对象就不行了,两个相同的对象的hashcode是相同的. 如果要对比两个相同的对象的地址可以使用,System.identityHas ...

  8. 文件IO操作开发笔记（一）：使用Qt的QFile对磁盘文件存储进行性能测试以及测试工具

    前言   在做到个别项目对日志要求较高,要求并行写入的数据较多,尽管写入数据的线程放在子线程,仍然会造成界面程序的假死(实际上Qt还是在跑,只是磁盘消耗超过瓶颈,造成假死(注意:控制台还能看到打印输出 ...

  9. python中操作csv

    示例 import csv with open('t.csv', mode='r', encoding='utf-8') as f: reader_obj = csv.reader(f) # 通过re ...

  10. 【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目，应该怎么部署运行呢？

    问题描述 用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢? 问题解答 VUE通常是运行在客户端侧的JS框架. App Service 在这种场景中是以静态文件的形式提供 ...