编程技术

Document

css+js实现点击特效效果

话不多说，先上效果图

 实现代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        height: 100vh;
        width: 100%;
    }
    img {
        width: 40px;
        height: 40px;
        animation: moy 1.2s infinite; 
        position: fixed;
    }
    @keyframes moy {
        0%{
            opacity: 1;
        }
        50%{
            opacity: .5;
            transform: translateY(-30px)
        }
        100% {
            opacity: 0;
        }
    }
</style>

<body>
    请点击屏幕触发效果
    <!-- <img src="./icon/008_鲜花绿植.png" alt=""> -->
</body>
<script>
    const bodyClick = document.querySelector('body') // 获取body节点
    const list = ['./icon/008_鲜花绿植.png', './icon/008_雪糕冰棒.png', './icon/008_啤酒精酿.png', './icon/008_奶油蛋糕.png']
    bodyClick.addEventListener('click', function(event) {
        const img = document.createElement('img') // 创建img节点
        img.src = list[Math.round(Math.random()*3)] // 定义创建img节点的src地址（Math.round(Math.random()*3)）为随机获取数值
        img.style.left = event.clientX - 19 + 'px' // 定义固定定位位置
        img.style.top =  event.clientY - 19 + 'px'
        document.body.appendChild(img) // 将创建的img节点放入body里面
        setTimeout(() => {
            img.remove() // 1秒后删除该节点
        },1000)
    })
</script>

</html>