废话少说，先上代码了，复制到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. 详解网络知识：iptables规则

    本文分享自华为云社区<[理解云容器网络]1-基础篇-iptables介绍>,作者: 可以交个朋友. iptables规则 下图为数据包到达linux主机网卡后,内核如何处理数据包的大致流程 ...

  2. Linux线程 | 创建 终止 回收 分离

    一.线程简介 线程是参与系统调度的最小单位.它被包含在进程之中,是进程中的实际运行单位. 一个进程中可以创建多个线程,多个线程实现并发运行,每个线程执行不同的任务. 每个线程都有其对应的标识,称为线程 ...

  3. Centos7的KVM安装配置详解

    KVM和虚拟化 虚拟化有几种类型: 完全虚拟化(Full virtualization), 虚机使用原始版本的操作系统, 直接与CPU通信, 是速度最快的虚拟化. 半虚拟化(Paravirtualiz ...

  4. Swoole从入门到入土(6)——TCP服务器[粘包]

    在了解Swoole下如何处理粘包问题之前,我们需要先了解什么是"粘包".我们以下面这张图进行普及: 假设客户端分别发送了两个数据包D1和D2给服务端,由于服务端一次读取到的字节数是 ...

  5. The Network Adapter could not establish the connection errorCode 17002, state 08006

    问题说明 今天在centos7虚拟机中运行java程序,程序启动需要连接主机的oracle,报错: The Network Adapter could not establish the connec ...

  6. React18 之 Suspense

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:佳岚 Suspense Suspense 组件我们并不陌生 ...

  7. LayUI样式优化

    如下是LayUI框架中页面元素的CSS优化样式: /* 表单输入框宽度 */ .layui-form-item .layui-input-inline { width: 295px; } /* 下拉框 ...

  8. offline RL | 读读 Decision Transformer

    论文标题:Decision Transformer: Reinforcement Learning via Sequence Modeling,NeurIPS 2021,6 6 7 9 poster( ...

  9. tomcat启动错误“The temporary upload location”

    目录 问题的原因 解决方案 临时的,直接重新启动项目就行,会重新建立临时文件夹 在配置文件中配置tomcat的临时目录: 写个配置类,通过@Bean的方式配置目录: 问题的原因 在Linux 系统中, ...

  10. 【Azure 媒体服务】使用编码预设文件(Preset.json)来自定义编码任务 -- 创建视频缩略图

    问题描述 在Azure门户上创建Transform Encoding时候,只能选择 Built-in Preset 编码方式(如:H265ContentAwareEncoding) 在创建编码任务时, ...