让我们先来看看实现的效果

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<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="style.css">
</head>
<body>
    <div class="bt">泛起波纹的按钮</div>
    <script>
        //找到按钮元素
        const bt = document.querySelector('div.bt');
        //绑定安修的点击事件
        bt.addEventListener('click',(e) =>{
     
     
            //获取按钮的偏移量，位置坐标中的left和top
            //此处为按钮左上角，距离页面左侧和顶部的距离
            let offsetLeft=e.target.offsetLeft;
            let offsetTop=e.target.offsetTop;
            
            //注意：当点击空白处并且连续点击两次以上
            //会点击再span元素中，所以获取的offset相关值是san的
            //而不是div的，所有计算位置是错误的
            if(e.target.nodeName=='SPAN'){
     
     
                //如果点击了span元素，则获取span的上级父元素div的offset相关值
                offsetLeft=e.target.offsetParent.offsetLeft;
                offsetTop=e.target.offsetParent.offsetTop;
            }
            //计算span的坐标
            let x=e.clientX-offsetLeft;
            let y=e.clientY-offsetTop;
            // 用来再控制台看是否监听到了点击
            // console.log(x+' '+y);
            //定义span
            let ripple=document.createElement('span');
            ripple.style.left=x+"px";
            ripple.style.top=y+"px";
            //将ripple插入到bt中
            bt.appendChild(ripple);
            //增加计时器，每秒钟自动将当前span清理掉，不至于越来越多
            setTimeout(()=>{
     
     
                ripple.remove();
            },1000);
        });
    </script>
    
</body>
</html>

css代码

:root{
    
    
    --background-color:#2c3e50;
    --show_color1:#03a9f4;
    --show_color2:#f441a5;
}
*{
    
    
    margin: 0;
    padding: 0;
}
body{
    
    
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bt{
    
    
    font-size: 15px;
    color: #fff;
    background: linear-gradient(90deg,var(--show_color1),var(--show_color2));
    padding: 24px 48px;
    border-radius: 60px;
    position: relative;
    overflow: hidden;
}
.bt span{
    
    
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: show 1s;

}
@keyframes show{
    
    
    0%{
    
    
        opacity: 0.5;
        width: 0;
        height: 0;
    }
    100%{
    
    
        opacity: 0;
        width: 300px;
        height: 300px;
    }
}

今日学习到知识总结

标签或者函数	作用
opacity	设置不透明级别
span	用来组合行内元素，很灵活
document.querySelector	获取文档中的某个元素
addEventListener	添加点击事件
e.target.offsetLeft	返回当前元素(事件)左上角
e.target.nodeName	获得节点名称
e.target.offsetParent.offsetLeft	返回父类元素左上角
e.clientX	clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
document.createElement	createElement() 方法通过指定名称创建一个元素
.style.left	left 属性设置或返回定位元素的左部位置。
appendChild	appendChild() 方法向节点添加最后一个子节点。
setTimeout	setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

[100天挑战100个前端效果]第七天---涟漪按钮(今天加入了JavaScript哟！)

涟漪按钮

让我们先来看看实现的效果

html代码

css代码

今日学习到知识总结

猜你喜欢