欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html+css+js涟漪效果按钮 点击泛起涟漪

程序员文章站 2022-06-09 17:02:09
...

效果如果

html+css+js涟漪效果按钮 点击泛起涟漪

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans"> */
    {
        margin:0;
        padding:0;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction:column;
        background: #040d15;
    }
    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;
        background: linear-gradient(90deg,#0162c8,#55e7fc);
        overflow: hidden;
    }
    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: .5;
        }
        100%{
            width: 500px;
            height: 500px;
            opacity: 0;
        }
    }

</style>

<body>
    <a href="#">Button</a>
    <a href="#">Button</a>
</body>

<script>
    const buttons = document.querySelectorAll('a');
    buttons.forEach(btn => {
        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)
        })
    })
</script>

</html>