写一个动态下雨的HTML,要求效果好看
时间: 2023-05-20 18:01:34 浏览: 79
您好,以下是一个简单的动态下雨的HTML代码,您可以根据需要进行修改和优化:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态下雨效果</title>
<style type="text/css">
body {
background-color: #000;
}
.rain {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url('https://i.imgur.com/9r6TKFp.png');
background-repeat: repeat-y;
background-size: contain;
animation: rain 0.5s linear infinite;
}
@keyframes rain {
from {
transform: translateY(0);
}
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<div class="rain"></div>
</body>
</html>
```
这个代码使用了CSS3的动画效果,通过不断地移动背景图片来模拟下雨的效果。您可以将背景图片替换成自己喜欢的雨滴图片,也可以调整动画的速度和方向来达到更好的效果。希望对您有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)