js+css实现点击按钮水波纹

最新推荐文章于 2024-08-23 16:40:40 发布

「已注销」

最新推荐文章于 2024-08-23 16:40:40 发布

阅读量6.4k

点赞数 2

分类专栏：前端开发文章标签： css javascript 前端开发 HTML5

本文链接：https://blog.csdn.net/wall1999/article/details/55194547

版权

本文介绍了如何使用JavaScript和CSS实现点击按钮时的水波纹效果。关键步骤包括获取鼠标位置，计算相对元素的坐标，并据此设置波纹元素的偏移，以在按钮上产生视觉上的水波扩散效果。

摘要由CSDN通过智能技术生成

.ripple-effect {
        position: relative;
        overflow: hidden;
    }
    
    .btn {
        width: 150px;
        height: 40px;
        border: 1px solid #d9d9d9;
        outline: none;
        background: #008DC5;
        color: #fff;
    }
    
    .ripple {
        border-radius: 50%;
        background: rgba(0, 0, 0, .5);
        -webkit-transform: scale(0);
        transform: scale(0);
        position: absolute;
        opacity: 1;
    }
    
    .rippleEffect {
        -webkit-animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
        animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .btn-primary .ripple {
        background: rgba(0, 0, 0, .1);
    }
    
    @keyframes rippleEffect {
        100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
        }
    }

<button class="btn btn-default ripple-effect">点击波纹</button>

function ripple(event, $this) {
        event = event || window.event;
        //  获取鼠标位置
        var x = event.pageX || document.documentElement.scrollLeft + document.body.scrollLeft + event.clientX;
        var y = event.pageY || document.documentElement.scrollTop + doc