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

Posted Naisu Xu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端例程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 = `$xpx`;
                    ripple.style.top = `$ypx`;
                    this.appendChild(ripple);

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

<body>
    <button>BUTTON</button>
    <button>BUTTON</button>
</body>

</html>

以上是关于前端例程20220728:按钮点击涟漪效果的主要内容,如果未能解决你的问题,请参考以下文章

求ae做水滴入水后水波荡漾的效果。

怎么用vue实现点击图片(按钮)的波纹效果(涟漪动效)

Android,设置按钮的背景颜色会失去涟漪效果

前端例程20220729:按钮悬停边框卷动效果

Android 为控件添加点击涟漪效果

前端例程20220906:霓虹灯效按钮