写一个动态下雨的HTML页面
时间: 2023-05-20 20:00:44 浏览: 64
好的,我可以为您提供一个动态下雨的HTML页面。以下是代码:
<!DOCTYPE html>
<html>
<head>
<title>动态下雨页面</title>
<style>
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/9QJ5fZB.png');
background-repeat: repeat-y;
animation: rain 1s linear infinite;
}
@keyframes rain {
from {
transform: translateY(0);
}
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<div class="rain"></div>
</body>
</html>
这个页面使用了CSS动画来实现下雨的效果,背景图片是一张带有雨滴的图片,通过CSS的动画来让图片从上往下移动,就形成了下雨的效果。
相关问题
用HTML写一段下雨代码
以下是一个使用HTML和CSS实现下雨效果的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>下雨特效</title>
<style>
body {
background-color: black; /* 将背景设置为黑色 */
overflow: hidden; /* 隐藏页面滚动条 */
}
.rain {
position: absolute; /* 设置为绝对定位 */
top: -50px; /* 初始位置为页面顶部 */
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 禁止鼠标事件 */
}
.drop {
position: absolute;
background-color: white; /* 设置雨滴颜色 */
width: 1px; /* 设置雨滴宽度 */
height: 50px; /* 设置雨滴高度 */
animation: fall linear infinite; /* 添加动画效果 */
}
@keyframes fall {
to {
transform: translateY(100vh); /* 设置滑落的终点位置 */
}
}
</style>
</head>
<body>
<div class="rain">
<!-- 使用 JavaScript 动态生成雨滴元素 -->
</div>
<script>
// 获取容器元素
const container = document.querySelector('.rain');
// 设置雨滴数量
const drops = 50;
// 生成雨滴
for (let i = 0; i < drops; i++) {
const drop = document.createElement('div');
drop.classList.add('drop');
drop.style.left = `${Math.random() * 100}%`; // 随机设置雨滴的横坐标
drop.style.animationDelay = `${Math.random() * 5}s`; // 随机设置雨滴的动画延迟时间
container.appendChild(drop);
}
</script>
</body>
</html>
```
这段代码通过设置一个名为 `.rain` 的容器元素,并在其中使用 JavaScript 动态生成多个名为 `.drop` 的雨滴元素,利用 CSS 的动画效果实现雨滴不断下落的效果,从而实现下雨特效。
写一个H5的html页面
以下是一个简单的 H5 HTML 页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的H5页面</title>
</head>
<body>
<header>
<h1>欢迎来到我的H5页面</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新消息</h2>
<article>
<h3>这是一篇新闻</h3>
<p>今天天气晴朗,万里无云。</p>
</article>
<article>
<h3>这是另一篇新闻</h3>
<p>明天下雨,记得带伞。</p>
</article>
</section>
<section>
<h2>产品介绍</h2>
<article>
<h3>产品一</h3>
<p>这是产品一的介绍。</p>
</article>
<article>
<h3>产品二</h3>
<p>这是产品二的介绍。</p>
</article>
</section>
</main>
<footer>
<p>版权所有 © 2023 我的H5页面</p>
</footer>
</body>
</html>
```
这个页面包括了一个页面标题、页面头部、页面主体和页面底部。在页面头部,我们使用了 meta 标签来设置字符集为 UTF-8,这样可以确保网页中文字符能够正确显示。在页面主体部分,我们使用了 header 元素来包含网页的标题和导航菜单,使用了 main 元素来包含网页的主要内容,使用了 footer 元素来包含网页的版权信息。在主要内容部分,我们使用了 section 元素来划分不同的内容区块,使用了 article 元素来包含具体的文章内容。
相关推荐
![](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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)