前端例程20220728：按钮点击涟漪效果

演示

在这里插入图片描述

原理

监听按钮点击事件；
点击事件中获取点击位置；
在点击位置生成一个元素作为水波；
水波生成后通过扩散同时变透明；
水波根据动画时间变透明后销毁；

代码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>按钮点击涟漪效果title>

    <style>
        * {
            padding: 0;
            margin: 0;
            user-select: none;
        }

        html,
        body {
            height: 100vh;
        }
    style>

    <style>
        body {
            display: flex;
            background-color: #222222;
            align-items: center;
            justify-content: center;
        }

        button {
            width: 200px;
            height: 80px;
            margin: 20px;
            border-radius: 40px;
            border: none;
            font-size: 30px;
            color: rgba(255, 255, 255, 0.5);
        }

        button:focus {
            outline: none;
        }

        button:nth-child(1) {
            background: linear-gradient(to right, #0365CA, #4FDEF8);
        }

        button:nth-child(2) {
            background: linear-gradient(to right, #DD72AB, #F0B6DA);
        }
    style>

    <style>
        /* button position=relative / span position=absolute 结合使用 */
        button {
            position: relative;
            /* 隐藏button中超出button边界的元素 */
            overflow: hidden;
        }

        /* 使用span元素作为水波 */
        /* 点击按钮时会在点击位置生产水波 */
        /* 水波生成后从小到大扩散 */
        button span {
            position: absolute;
            background: white;
            pointer-events: none;
            border-radius: 50%;
            /* 使水波中心点位置保持不变 */
            transform: translate(-50%, -50%);
            animation: animate 1s linear;
        }

        /* 尺寸和透明度动画效果 */
        @keyframes animate {
            0% {
                width: 0px;
                height: 0px;
                opacity: 0.5;
            }

            100% {
                width: 400px;
                height: 400px;
                opacity: 0;
            }
        }
    style>

    <script>
        window.onload = () => {
            const buttons = document.querySelectorAll('button');
            buttons.forEach(btn => {
                btn.addEventListener('click', function (e) {
                    // 计算点击位置
                    // 结合button position=relative / span position=absolute，这里得到的位置为相对button的位置
                    let x = e.offsetX;
                    let y = e.offsetY;

                    // 创建水波元素
                    let ripple = document.createElement('span');
                    ripple.style.left = `${x}px`;
                    ripple.style.top = `${y}px`;
                    this.appendChild(ripple);

                    // 水波扩散一定时间后删除
                    setTimeout(() => {
                        ripple.remove();
                    }, 1000)
                })
            })
        };
    script>
head>

<body>
    <button>BUTTONbutton>
    <button>BUTTONbutton>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

相关阅读:
【文献分享】NASA JPL团队CoSTAR一大力作：直接激光雷达里程计:利用密集点云快速定位
 如何获取文本中出现的所有单词
 我的运维笔记之Linux安装篇
 PCA-主成分分析法
 华为三位大佬耗时半年终成MySQL金字塔，面试无忧！
20221114 今天的世界发生了什么
 strerror函数
 torch加载glove预训练的embedding
Java异常处理机制
 接收区块链的CCF会议--SecureComm 2024 截止5.10 附录用率
原文地址：https://blog.csdn.net/Naisu_kun/article/details/126039875