20.按钮事件

按钮事件

html部分

    Click me

css部分

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: black;
}

button{
     background-color: purple;
     color: white;
     border: 1px purple solid;
     font-size: 14px;
     letter-spacing: 2px;
     padding: 20px 30px;
     margin: 10px 0;
     position: relative;
     cursor: pointer;
     overflow: hidden;
}
button:focus{
    outline: none;
}

button .circle{
    position: absolute;
    background-color: white;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(0);
    animation: scale .3s;
    display: inline-block;
}

@keyframes scale {
    to{
        opacity: 0;
        transform: translate(-50%,-50%) scale(3);
    }
}

js部分

// 获取dom
const button=document.querySelector("button");

button.addEventListener("click",function(e){
    // 获取鼠标点击距离屏幕边界距离
    const x=e.clientX
    const y=e.clientY

    // 获取点击元素目标元素距离屏幕边界距离
    const offset_x=e.target.offsetLeft
    const offset_y=e.target.offsetTop

    // 计算鼠标点击距离目标元素边界距离
    const target_x=x-offset_x
    const target_y=y-offset_y

    
    // 添加span元素
    const span=document.createElement("span");
    span.classList.add("circle");
    span.style.left=target_x+"px";
    span.style.top=target_y+"px";
    this.appendChild(span); 

    setTimeout(()=>{
        this.removeChild(span);
    },500)
})

效果