Without further ado, here are the renderings first
Implementation code:
<!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>