网页动态背景一般是用视频实现的，能增添网页的感染力，好看不难，不妨学一下。
先加入下面一串代码：
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>可选属性:
<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)