话不多说，先上效果图
实现代码：
<!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>
