水波涟漪效果

最新推荐文章于 2022-10-03 18:47:58 发布

独鹿DT

最新推荐文章于 2022-10-03 18:47:58 发布

阅读量929

点赞数 8

分类专栏：网页小Demo 文章标签： css html js 网页动效

本文链接：https://blog.csdn.net/weixin_47529373/article/details/116042219

版权

网页小Demo 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

水波涟漪效果

点击在线体验
Github地址

效果展示

点击在线体验
 Github地址

在这里插入图片描述

代码实现

HTML+JS

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水波涟漪效果</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box">
        <span>welcome</span>
        <span>coderbin.link</span>
    </div>
    <script>
        const spans = document.querySelectorAll('.box span');
        spans.forEach(span => {
            span.addEventListener('click', function(e) {
                let posX = e.pageX - e.target.offsetLeft;
                let posY = e.pageY - e.target.offsetTop;
                const i = document.createElement('i');
                i.style.left = posX + 'px';
                i.style.top = posY + 'px';
                this.appendChild(i);
                setTimeout(() => {
                    this.removeChild(i);
                }, 2000)

            })
        })
    </script>
</body>

</html>

CSS

body {
    height: 100vh;
    background-color: #232323;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box span {
    position: relative;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    color: #fff;
    text-transform: uppercase;
    padding: 0 20px;
    overflow: hidden;
    letter-spacing: 2px;
    margin-right: 50px;
    border-radius: 17.5px;
}

.box span:nth-child(1) {
    background: linear-gradient(to right, #755bea, #ff72c0);
}

.box span:nth-child(2) {
    background: linear-gradient(to right, #0162c8, #55e7fc);
}

.box span i {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #fff;
    animation: move 2s linear 0s 1;
    pointer-events: none;
}

@keyframes move {
    0% {
        width: 0;
        height: 0;
        opacity: .5;
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }
}

独鹿DT

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
9
评论
水波涟漪效果

水波涟漪效果效果展示代码实现HTML+JSCSS点击在线体验效果展示点击在线体验代码实现HTML+JS<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
复制链接

扫一扫

专栏目录