网页动态背景一般是用视频实现的，能增添网页的感染力，我觉得很好看，也不难，不妨学一下。
先加入下面一串代码：
1 <style>
2 video{
3 height: 100%;
4 width: 100%;
5 position: absolute;
6 right: 0px;
7 bottom: 0px;
8 z-index:-1;
9 }
10 </style>
z-index的值只要小于0就行，毕竟视频是要作为背景的。
下面代码是引入素材：
1 <body> 2 <video src="./example.mp4" <!--素材路径--> 3 style="width: 100%;height: 100%;object-fit:cover;position:absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video> 4 </body>
介绍一下<video>可选属性:
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 如果出现该属性，视频的音频输出为静音。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
| preload | auto metadata none |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
下面是完整代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 video{
5 height: 100%;
6 width: 100%;
7 position: absolute;
8 right: 0px;
9 bottom: 0px;
10 z-index:-1;
11 }
12 </style>
13 <head>
14 <meta charset="UTF-8">
15 <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 <title>动态背景</title>
17 </head>
18 <body>
19 <video src="./example.mp4" <!--素材背景-->
20 style="width: 100%;height: 100%;object-fit:cover;position:absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
21 <p><li style="text-align: left;font-family: KaiTi;font-size: larger;color: rgba(0, 255, 42, 0.984);">夏天的飞鸟，飞到我窗前唱歌，又飞去了。
22 <br>秋天的黄叶，它们没有什么可唱，只叹息一声，飞落在那里。<br>Stray birds of summer come to my window to sing and fly away.
23 </body>
24 </html>
展示实际效果：
具体学习HTML建议到菜鸟教程：HTML 教程 | 菜鸟教程 (runoob.com)
标签：视频,muted,背景,100%,HTML,属性,loop,autoplay From： https://www.cnblogs.com/TheHypocrite/p/17685885.html