master

分支 (1)

管理

管理

master

native-practice
/
按钮点击动画.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>Document</title>
</head>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/btnAnimation.js"></script> -->

<body>
    <button onclick="add(event)">
        点击
    </button>
</body>
<style>
    button {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>
<script>
    function buttonAnimation(e, color = '#fff') {
        const style = document.createElement('style')
        style.innerHTML = '.buttonAnimation {' +
            '  position: absolute;' +
            '  height: 400px;' +
            '  width: 400px;' +
            `  background:${color};` +
            '  top: 0;' +
            '  left: 0;' +
            '  border-radius: 50%;' +
            '  transform: translate(-50%, -50%);' +
            '  opacity: 0.5;' +
            '  animation: buttonAnimation 0.5s linear infinite;' +
            '}' +
            '@keyframes buttonAnimation {' +
            '  0% {' +
            '    height: 0px;' +
            '    width: 0px;' +
            '    opacity: 0.5;' +
            '  }' +
            '  100% {' +
            '    height: 400px;' +
            '    width: 400px;' +
            '    opacity: 0;' +
            '  }' +
            '}'
        e.target.appendChild(style)
        e.target.style.cssText = 'position:relative;overflow:hidden;'
        const overlay = document.createElement('span')
        overlay.classList.add('buttonAnimation')
        const x = e.clientX - e.target.getBoundingClientRect().left
        const y = e.clientY - e.target.getBoundingClientRect().top
        overlay.style.left = x + 'px'
        overlay.style.top = y + 'px'
        e.target.appendChild(overlay)
        setTimeout(() => {
            overlay.remove()
            style.remove()
        }, 500)
    }

    function add(e) {
        console.log('E', e);
        buttonAnimation(e)
    }
</script>

</html>