废话少说，先上代码了，复制到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. 【Android】使用MediaExtractor获取关键帧的时间戳

    1 前言 使用MediaExtractor.MediaMuxer去掉视频文件中的音频数据 中介绍了 MediaExtractor 类的主要方法,本文主要将使用其 advance() 和 seekTo( ...

  2. Java并发编程实例--13.方法同步（synchronized）

    使用synchronized关键字去控制对某个方法的并发调用. 某一时段内,只能有一个线程可以读取该方法. 其他线程需要等待前面线程调用完毕后方可调用. 不过,静态方法有着不同的行为. 虽然也是每次只 ...

  3. 启动MySQL5.7服务无法启动或Table 'mysql.plugin' doesn't exist

    首先说一下我这个是mysql5.7.16免安装版,不过这个问题对于5.7版本应该都适用. 问题重现: 安装过程也说一下吧: 1.将下载的压缩文件解压到指定目录,     我的是:E:\program\ ...

  4. B - Bracket Sequence题解

    B - Bracket Sequence 思路: 用一个flag来标记括号的数目,如果括号数目是个偶数的话,就代表当前要执行'+'操作,反之就是'*'操作.对于最外层的数,是没有计算的. 所以最后要单 ...

  5. 升级 vcpkg 遇到的一些坑

    项目上有个需求要用到 wil 库,于是打开 cmd 输入: vcpkg install wil:x86-windows-static 等了很久,一直卡在配置命令 连续试了好几遍,还是不行,安装其他的静 ...

  6. Direct2D 另一种与D3D创建类似的方法

    在进行D2D学习的时候,发现了这样一篇文档, Direct2D Quickstart for Windows 8 只有这么一小段介绍, Direct2D is a native-code, immed ...

  7. 【Android逆向】修改so文件方式修改程序行为

    1. 还是之前的那个apk 链接:https://pan.baidu.com/s/1vKC1SevvHfeI7f0d2c6IqQ 密码:u1an 尝试使用 010Editor来修改so文件 2. 使用 ...

  8. render_to_string快捷函数，渲染模板字符串

    # views.py from django.template.loader import render_to_string from django.http import HttpResponse ...

  9. vue upload 图片转base64、转二进制数组，保存编码数据到文件

    功能需求 1.图片转base64 2.base 64 转二进制数组 3.保存二进制数据到文件下载到本地 解决方法 问题1: 参考资料 vue element upload图片 转换成base64 具体 ...

  10. 【Azure API 管理】APIM服务资源删除后，为什么不能马上创建相同名称的APIM服务呢？

    问题描述 使用Azure APIM服务,在删除旧资源准备新建相同名称的新APIM服务时,尝试多次都是出现"指定的服务名称已正在使用"错误.但实际上同名称的服务已经被删除.为什么多次 ...