html，，，，，HTML5 Loading，，，，， document.getElementById('loading').style.border = '16px solid #f3f3f3';， document.getElementById('loading').style.borderRadius = '50%';， document.getElementById('loading').style.borderTop = '16px solid #3498db';， document.getElementById('loading').style.width = '120px';， document.getElementById('loading').style.height = '120px';， document.getElementById('loading').style.animation = 'spin 2s linear infinite';， var styleEl = document.createElement('style');， styleEl.innerHTML = @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } };， document.head.appendChild(styleEl);，，，，``在网页设计中，加载动画（loading图）是一种常见的用户体验元素，用于在页面内容完全加载之前显示，使用HTML5来制作一个动态的loading图，可以提升用户等待的体验，并使网站显得更加专业和友好，本文将详细介绍如何使用HTML5制作一个简单的loading图。
基本结构
我们需要创建一个基本的HTML文件结构，包括<!DOCTYPE html>,<html>,<head>和<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Loading Animation</title>
<style>
#loader {
border: 16px solid #f3f3f3; /* Light grey */
bordertop: 16px solid #3498db; /* Blue */
borderradius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loader"></div>
</body>
</html>
CSS样式
在上述代码中，我们定义了一个名为#loader的CSS样式：
1、边框：使用border属性创建了一个圆环效果，顶部的蓝色边框会在加载过程中旋转。
2、动画：通过animation属性应用了名为spin的关键帧动画，使蓝色部分无限旋转。
关键帧动画
关键帧动画是通过@keyframes规则定义的，在这个例子中，我们定义了一个从0度到360度的旋转动画，持续时间为2秒，并且是线性的。
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
高级用法：添加文本提示
除了纯图形的loading动画，我们还可以添加一些文本提示，Loading...”，这可以通过在HTML中添加一个额外的<div>元素来实现。
<body>
<div id="loader"></div>
<div id="text">Loading...</div>
</body>
我们可以在CSS中对文本进行样式设置：
#text {
fontfamily: Arial, sansserif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, 50%);
color: #3498db;
}
完整示例
结合以上内容，完整的HTML和CSS代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Loading Animation</title>
<style>
#loader {
border: 16px solid #f3f3f3; /* Light grey */
bordertop: 16px solid #3498db; /* Blue */
borderradius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#text {
fontfamily: Arial, sansserif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, 50%);
color: #3498db;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loader"></div>
<div id="text">Loading...</div>
</body>
</html>
这个示例展示了一个带有文本提示的简单loading动画，可以根据需要进一步自定义样式和动画效果。
FAQs
1. 如何修改loading图的颜色？
答：要修改loading图的颜色，只需更改CSS中的border属性，将蓝色部分改为红色：
bordertop: 16px solid #e74c3c; /* Red */
这样，顶部的边框颜色就会变为红色，旋转时会显示红色的loading图。
2. 如何调整loading图的大小？
答：要调整loading图的大小，可以修改CSS中的width和height属性，将大小调整为150px：
width: 150px; height: 150px;
为了保持边框的厚度不变，可以将border属性的值也相应地增大：
border: 20px solid #f3f3f3; /* Light grey */ bordertop: 20px solid #3498db; /* Blue */
这样，loading图的大小和边框厚度都会相应地增大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Loading Image Example</title>
<style>
/* Loading GIF style */
.loadingcontainer {
position: relative;
width: 100px;
height: 100px;
borderradius: 50%;
margin: 50px auto;
animation: spin 1s linear infinite;
}
.loadingoverlay {
position: absolute;
width: 100%;
height: 100%;
borderradius: 50%;
backgroundcolor: rgba(0, 0, 0, 0.5);
display: flex;
justifycontent: center;
alignitems: center;
color: white;
fontsize: 24px;
}
/* Keyframes for the spinning animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loadingcontainer">
<div class="loadingoverlay">Loading...</div>
</div>
<script>
// You can add JavaScript here if needed for dynamic loading
</script>
</body>
</html>
代码是一个简单的HTML5页面，其中包含了一个自定义的加载动画，这个加载动画由一个圆形的容器和一个在其内部的加载提示文本组成，动画通过CSS的@keyframes规则实现，使得容器持续旋转，从而模拟一个加载状态。
.loadingcontainer 类定义了加载动画的容器样式，包括大小、定位和动画。
.loadingoverlay 类定义了加载提示文本的样式，包括背景颜色、字体颜色、对齐方式等。
@keyframes spin 规则定义了旋转动画，使容器不断旋转。
在<body>标签中，我们创建了一个div元素，应用了.loadingcontainer类，并在其中嵌套了一个显示“Loading...”文本的div元素，应用了.loadingoverlay类。
这个示例展示了如何使用HTML5和CSS来创建一个简单的加载动画，而无需任何外部库或工具。