screenshots.gif

<!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>
   
</body>
<script>
    const bodyClick = document.querySelector('body') // 获取body节点
    const list = ['https://xn--xu0a.cn/favicon.ico', 'https://b.xn--xu0a.cn/favicon.ico', 'https://xn--xu0a.cn/ico/bi.ico', 'https://羽.cn/ico/dy.ico']
    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>