在网页开发中，一个好的加载页面不仅能提升用户体验，还能为网站增添独特的风格。下面将对一段实现加载页面效果的 HTML 与 CSS 代码进行详细介绍。
整体结构概述
该代码创建了一个包含背景、内容容器以及加载动画元素的网页页面。整体布局通过多个div元素和 CSS 样式来实现，主要包括背景层、内容层以及加载动画层。
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式代码部分，后续会详细介绍 */
</style>
</head>
<body>
<div class="xiao">
<div class="xiao1">
<div class="xiao2"></div>
</div>
</div>
<div class="xiao3"></div>
</body>
</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 部分
/* 去除默认的外边距和内边距 */
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
div.xiao {
position: relative;
z-index: 1;
/* 设置宽度和高度为100% */
width: 100%;
height: 100%;
background-image: url(./png/bg.webp);
/* 使背景图像覆盖整个元素 */
background-size: cover;
/* 使背景图像居中 */
background-position: center;
}
.xiao1 {
position: fixed;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 84%;
background-color: #fffcf2;
background-position: center;
}
.xiao2 {
position: fixed;
top: 3%;
left: 50%;
transform: translate(-50%, 0);
width: 400px;
height: 280px;
background-image: url(./png/logo_portal.svg);
z-index: 3;
background-size: cover;
background-position: center;
}
.xiao3 {
position: fixed;
top: 53%;
left: 50%;
transform: translate(-50%, 0);
width: 190px;
height: 190px;
background-image: url(./png/loading.svg);
z-index: 3;
background-size: cover;
background-position: center;
/* 修改旋转速度为1秒一圈 */
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
transform: translate(-50%, 0) rotate(0deg);
}
100% {
transform: translate(-50%, 0) rotate(360deg);
}
}- 完整代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 去除默认的外边距和内边距 */ body, html { margin: 0; padding: 0; height: 100%; } div.xiao { position: relative; z-index: 1; /* 设置宽度和高度为100% */ width: 100%; height: 100%; background-image: url(./png/bg.webp); /* 使背景图像覆盖整个元素 */ background-size: cover; /* 使背景图像居中 */ background-position: center; } .xiao1 { position: fixed; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; height: 84%; background-color: #fffcf2; background-position: center; } .xiao2 { position: fixed; top: 3%; left: 50%; transform: translate(-50%, 0); width: 400px; height: 280px; background-image: url(./png/logo_portal.svg); z-index: 3; background-size: cover; background-position: center; } .xiao3 { position: fixed; top: 53%; left: 50%; transform: translate(-50%, 0); width: 190px; height: 190px; background-image: url(./png/loading.svg); z-index: 3; background-size: cover; background-position: center; /* 修改旋转速度为1秒一圈 */ animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, 0) rotate(0deg); } 100% { transform: translate(-50%, 0) rotate(360deg); } } </style> </head> <body> <div class="xiao"> <div class="xiao1"> <div class="xiao2"></div> </div> </div> <div class="xiao3"></div> </body> </html>效果如图
