可以写一个红包雨的HTML代码吗
时间: 2024-01-23 15:01:45 浏览: 28
当然可以,以下是一个简单的红包雨的HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>红包雨</title>
<style>
body {
margin: 0;
padding: 0;
}
.redbag {
position: absolute;
width: 40px;
height: 40px;
background-image: url('redbag.png');
background-size: contain;
background-repeat: no-repeat;
animation: drop 5s ease-in-out infinite;
}
@keyframes drop {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
function createRedbag() {
const redbag = document.createElement('div');
redbag.className = 'redbag';
redbag.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(redbag);
}
setInterval(createRedbag, 500);
</script>
</body>
</html>
```
请注意这个代码只是一个简单的示例,实际使用中您可能需要根据您的具体需求进行适当修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)