<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img {
width: 40px;
position: fixed;
top: -100px;
animation: down;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 1s;
}
@keyframes down {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(110vh);
}
}
</style>
</head>
<body>
<script>
let clientWidth = document.body.clientWidth
let redbags = new Array(20).fill(0).forEach(x => {
document.body.innerHTML += `<img src="./红包.webp" class="img" style="animation-duration: ${Math.random()*2+1}s;left: ${Math.random()*clientWidth-40}px;" />`
})
</script>
</body>
</html>
