html水调歌头网页制作
时间: 2023-10-06 16:14:21 浏览: 185
HTML 水调歌头网页制作是一种基于 HTML 语言的网页制作方法,可以用来创建具有水调歌头效果的网页。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>水调歌头网页</title>
<style>
/* 定义动画效果 */
@keyframes scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
/* 样式设置 */
body {
overflow: hidden;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.text-container {
position: relative;
width: 100%;
height: 100%;
animation: scroll 10s linear infinite;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
line-height: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-container">
<div class="text">
<!-- 歌词内容 -->
岳飞·满江红<br>
怒发冲冠,凭阑处、潇潇雨歇。<br>
抬望眼、仰天长啸,壮怀激烈。<br>
三十功名尘与土,八千里路云和月。<br>
莫等闲、白了少年头,空悲切。<br>
靖康耻,犹未雪;臣子恨,何时灭?<br>
驾长车,踏破贺兰山缺。<br>
壮志饥餐胡虏肉,笑谈渴饮匈奴血。<br>
待从头、收拾旧山河,朝天阙。<br>
</div>
</div>
</div>
</body>
</html>
```
你可以将上述代码保存为一个 HTML 文件,然后在浏览器中打开该文件,就能看到一个具有水调歌头效果的网页。请注意,这只是一个简单示例,你可以根据需要进行修改和扩展。
相关推荐
![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)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)