• 技术文章 >web前端 >js教程

    通过代码示例,了解css3+javascript按钮水波纹效果

    青灯夜游青灯夜游2021-04-29 09:26:48转载723
    本篇文章通过代码示例,带大家介绍一下css3+javascript实现按钮水波纹效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    css3+js实现按钮水纹涟漪效果

    HTML

    <a href="#">button</a>
    <a href="#">button</a>

    CSS3

    * {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif; /* 字体 */
    }
    
    body {
        display: flex;
        justify-content: center;/* 弹性盒子 */
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
        background: #1f2a33;
    }
    
    a {
        position: relative;
        display: inline-block;
        padding: 12px 36px;
        margin: 10px 0;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 18px;
        letter-spacing: 2px;
        border-radius: 40px;
        overflow: hidden;
        background: linear-gradient(90deg, #0162c8, #55e7fc);
    }
    /* 子伪类选择器 */
    a:nth-child(2) {
        background: linear-gradient(90deg, #755bea, #ff72c0);
    }
    
    span {
        position: absolute;
        background: #fff;
        transform: translate(-50%, -50%);
        pointer-events: none;
        border-radius: 50%;
        animation: animate 1s linear infinite;
    }
    
    @keyframes animate {
        0% {
            width: 0px;
            height: 0px;
            opacity: 0.5;
        }
        100% {
            width: 500px;
            height: 500px;
            opacity: 0;
        }
    }

    JavaScript

    const buttons = document.querySelectorAll('a');
    
    buttons.forEach(btn => { //箭头函数 (ES6)
    
        btn.addEventListener('click', function (e) {
            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;
            
            let ripples = document.createElement('span');
            
            ripples.style.left = x + 'px';
            ripples.style.top = y + 'px';
            
            this.appendChild(ripples);
            setTimeout(() => {
                ripples.remove()
            }, 1000);
        })
    })

    效果图:

    涟漪效果

    更多编程相关知识,请访问:编程视频课程!!

    以上就是通过代码示例,了解css3+javascript按钮水波纹效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    上一篇:javascript对象怎么转换成字符串 下一篇:javascript怎么替换空格
    第16期线上培训班

    相关文章推荐

    • 使用css实现自适应标题浮动效果(代码实例)• css如何实现幻灯片效果• 分享使用CSS实现酷炫充电动画效果的小技巧• 详解Bootstrap中的手风琴效果• 详解使用纯CSS实现滚动进度条效果的几种技巧• 如何使用纯CSS、JS实现图片轮播效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网