废话少说，先上代码了，复制到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. NC20568 [SCOI2012]滑雪与时间胶囊

    题目链接 题目 题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着M条供滑行的轨道和N个轨道之间的交点(同时也是景点),而且每个景点都有一编号i(1 ≤ i ≤ N)和一高度Hi.a18 ...

  2. Sora文生视频模型深度剖析：全网独家指南，洞悉98%关键信息，纯干货

    Sora文生视频模型深度剖析:全网独家指南,洞悉98%关键信息,纯干货 Sora是一个以视频生成为核心的多能力模型,具备以下能力: 文/图生成视频 视频生成视频 1分钟超长高质量视频生成 视频裂变多视 ...

  3. mysql 外键索引入门介绍，为什么工作中很少有人使用？

    背景 以前工作学习中,一直被告诫不要使用外键,所以也没有仔细整理过. 这里记录一下笔记. 外键 是什么? MySQL 的外键(Foreign Key)是一种关系型数据库中用于建立表与表之间关联关系的重 ...

  4. Swoole从入门到入土(25)——多进程[进程间无锁计数器]

    Atomic 是 Swoole 底层提供的原子计数操作类,可以方便整数的无锁原子增减.原子计数器有如下特点: - 使用共享内存,可以在不同的进程之间操作计数 - 基于 gcc/clang 提供的 CP ...

  5. Django实战之文件上传下载

    项目介绍 最近学习django,通过文件上传下载这个小项目,总结下常用的知识点. 做这个案例我有以下需求: 1.要支持一次上传多个文件 2.支持上传后记录上传的数据以及列表展示 3.支持下载和删除文件 ...

  6. Java并发编程实例--16.使用ReentrantLock实现线程同步

    Java提供另一机制去同步代码块.它比synchronized关键字更强大且易用. 它是基于Lock接口和其实现类例如:ReentrantLock. 这一机制对比synchronized关键字的优势在 ...

  7. win32 - 创建无GUI的消息循环(包含线程窗口的说明)

    创建win32窗口需要注册,回调函数一些操作,如果我们不需要窗口的话,可以使用下面代码获得一个仅有消息循环的控制台. ps: 这样做主要对一些不需要窗口但需要消息循环的程序特别有用,比如蓝牙回调. # ...

  8. collections模块下的defaultdict用法

    defaultdict from collections import defaultdict s=[('yellow',1),('blue', 2), ('yellow', 3), ('blue', ...

  9. 【MongoDB】C# .Net MongoDB常用语法

    1.1.驱动安装 使用NuGet包管理器安装MongoDB C#驱动:MongoDB.Driver 1.2. C#连接MongoDB //获取MongoDB连接客户端 MongoClient clie ...

  10. mac环境下安装python3的requests包

    大家知道,mac环境默认安装的都是python2,自己装好python3之后,怎么使用pip来安装到python3下的包呢? 解决方法:pip3 install requests