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

最新推荐文章于 2023-06-06 15:49:12 发布

FF_Chen

最新推荐文章于 2023-06-06 15:49:12 发布

阅读量838

点赞数

分类专栏： CSS 文章标签： css3 html js

本文链接：https://blog.csdn.net/ff_chen/article/details/106507448

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如果

代码如下

<!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>

FF_Chen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
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>
复制链接

扫一扫