HTMLCSS实现动态背景图

在网页开辟中，一个好的加载页面不但能提拔用户体验，还能为网站增长独特的风格。下面将对一段实现加载页面效果的 HTML 与 CSS 代码举行详细先容。
团体结构概述

该代码创建了一个包罗背景、内容容器以及加载动画元素的网页页面。团体结构通过多个div元素和 CSS 样式来实现，告急包括背景层、内容层以及加载动画层。
HTML 部门

2. <!DOCTYPE html>
3. <html lang="en">
5. <head>
6.     <meta charset="UTF-8">
7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
8.     <title>Document</title>
9.     <style>
10.         /* 样式代码部分，后续会详细介绍 */
11.     </style>
12. </head>
14. <body>
15.     <div class="xiao">
16.         <div class="xiao1">
17.             <div class="xiao2"></div>
18.         </div>
19.     </div>
20.     <div class="xiao3"></div>
21. </body>
23. </html>

复制代码

• <!DOCTYPE html>：声明文档范例为 HTML5。
  
• <html lang="en">：界说 HTML 文档的根元素，并指定语言为英语。
  
• <head> 部门：包罗了文档的元数据，如字符编码、视口设置以及页面标题。
  
  
  
  • <meta charset="UTF-8">：设置字符编码为 UTF-8，确保页面可以或许准确体现各种字符。
    
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面在差别装备上可以或许准确缩放和体现。
    
  • <title>Document</title>：界说页面的标题，这里体现为 “Document”。
    
         
  
• <body> 部门：包罗了页面的实际内容。
  
  
  
  • <div class="xiao">：这是页面的最外层容器，用于设置背景图像和团体结构。
    
  • <div class="xiao1">：嵌套在.xiao容器内，用于放置告急内容区域，设置了白色背景。
    
  • <div class="xiao2">：嵌套在.xiao1内，是一个体现特定图像的容器。
    
  • <div class="xiao3">：独立于.xiao容器，用于体现加载动画的图像。
    
         
  

CSS 部门

2. /* 去除默认的外边距和内边距 */
3. body,
4. html {
5.     margin: 0;
6.     padding: 0;
7.     height: 100%;
8. }
10. div.xiao {
11.     position: relative;
12.     z-index: 1;
13.     /* 设置宽度和高度为100% */
14.     width: 100%;
15.     height: 100%;
16.     background-image: url(./png/bg.webp);
17.     /* 使背景图像覆盖整个元素 */
18.     background-size: cover;
19.     /* 使背景图像居中 */
20.     background-position: center;
21. }
23. .xiao1 {
24.     position: fixed;
25.     z-index: 2;
26.     left: 50%;
27.     top: 50%;
28.     transform: translate(-50%, -50%);
29.     width: 90%;
30.     height: 84%;
31.     background-color: #fffcf2;
32.     background-position: center;
34. }
36. .xiao2 {
37.     position: fixed;
38.     top: 3%;
39.     left: 50%;
40.     transform: translate(-50%, 0);
41.     width: 400px;
42.     height: 280px;
43.     background-image: url(./png/logo_portal.svg);
44.     z-index: 3;
45.     background-size: cover;
46.     background-position: center;
47. }
49. .xiao3 {
50.     position: fixed;
51.     top: 53%;
52.     left: 50%;
53.     transform: translate(-50%, 0);
54.     width: 190px;
55.     height: 190px;
56.     background-image: url(./png/loading.svg);
57.     z-index: 3;
58.     background-size: cover;
59.     background-position: center;
60.     /* 修改旋转速度为1秒一圈 */
61.     animation: spin 5s linear infinite;
63. }
65. @keyframes spin {
66.     0% {
67.         transform: translate(-50%, 0) rotate(0deg);
68.     }
70.     100% {
71.         transform: translate(-50%, 0) rotate(360deg);
72.     }
73. }

复制代码

• 完备代码展示
  
• 2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 去除默认的外边距和内边距 */
  11.         body,
  12.         html {
  13.             margin: 0;
  14.             padding: 0;
  15.             height: 100%;
  16.         }
  18.         div.xiao {
  19.             position: relative;
  20.             z-index: 1;
  21.             /* 设置宽度和高度为100% */
  22.             width: 100%;
  23.             height: 100%;
  24.             background-image: url(./png/bg.webp);
  25.             /* 使背景图像覆盖整个元素 */
  26.             background-size: cover;
  27.             /* 使背景图像居中 */
  28.             background-position: center;
  29.         }
  31.         .xiao1 {
  32.             position: fixed;
  33.             z-index: 2;
  34.             left: 50%;
  35.             top: 50%;
  36.             transform: translate(-50%, -50%);
  37.             width: 90%;
  38.             height: 84%;
  39.             background-color: #fffcf2;
  40.             background-position: center;
  42.         }
  44.         .xiao2 {
  45.             position: fixed;
  46.             top: 3%;
  47.             left: 50%;
  48.             transform: translate(-50%, 0);
  49.             width: 400px;
  50.             height: 280px;
  51.             background-image: url(./png/logo_portal.svg);
  52.             z-index: 3;
  53.             background-size: cover;
  54.             background-position: center;
  55.         }
  57.         .xiao3 {
  58.             position: fixed;
  59.             top: 53%;
  60.             left: 50%;
  61.             transform: translate(-50%, 0);
  62.             width: 190px;
  63.             height: 190px;
  64.             background-image: url(./png/loading.svg);
  65.             z-index: 3;
  66.             background-size: cover;
  67.             background-position: center;
  68.             /* 修改旋转速度为1秒一圈 */
  69.             animation: spin 5s linear infinite;
  71.         }
  73.         @keyframes spin {
  74.             0% {
  75.                 transform: translate(-50%, 0) rotate(0deg);
  76.             }
  78.             100% {
  79.                 transform: translate(-50%, 0) rotate(360deg);
  80.             }
  81.         }
  82.     </style>
  83. </head>
  85. <body>
  86.     <div class="xiao">
  87.         <div class="xiao1">
  88.             <div class="xiao2"></div>
  89.         </div>
  90.     </div>
  91.     <div class="xiao3"></div>
  92. </body>
  94. </html>

  复制代码
  效果如图
  
•