Let's take a look at the effect achieved first

Insert picture description here

html code

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

: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;
    }
}

Summary of knowledge learned today

Label or function	effect
opacity	Set opacity level
span	Used to combine elements in the line, very flexible
document.querySelector	Get an element in the document
addEventListener	Add click event
e.target.offsetLeft	Returns the upper left corner of the current element (event)
e.target.nodeName	Get node name
e.target.offsetParent.offsetLeft	Return the upper left corner of the parent element
e.clientX	The clientX event property returns the horizontal coordinate of the mouse pointer to the browser page (or client area) when the event is triggered.
document.createElement	The createElement() method creates an element by specifying the name
.style.left	The left property sets or returns the left position of the positioned element.
appendChild	The appendChild() method adds the last child node to the node.
setTimeout	The setTimeout() method is used to call a function or calculation expression after the specified number of milliseconds.

[100 days to challenge 100 front-end effects] Day 7---Ripple button (JavaScript added today!)

Ripple button

Let's take a look at the effect achieved first

html code

css code

Summary of knowledge learned today

Guess you like