数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用 CSS 创建高级加载画面
在浏览网站的不同页面时，开发者务必添加加载画面，以便网站有足够的时间在网页之间切换。加载画面是一种有效的方法，用户可以在网站页面加载/初始化时等待。
如何创建加载画面？
要创建加载画面，我们可以使用 HTML 和 CSS。首先，我们将创建一个 div 元素，其中包含一个显示百分比的标题标签。
然后，我们将使用 CSS 属性（如 border-radius）来设置高度和宽度，并向加载元素添加动画。我们还将使用 overflow 属性来隐藏元素，以便我们只能看到主要内容。
语法
以下是 overflow 属性的语法：
p {
overflow: hidden/ visible/ scroll/ auto;
}
在上面的语法中，您可以看到与 overflow 属性一起使用的值可以是隐藏元素的 hidden 值，使元素可见的 visible 值，以及添加滑块同时隐藏元素的 scroll 属性。
让我们来看一个例子，以便更好地理解加载画面。
示例
在下面的代码中，我们声明了标题标签和一个 div 容器，我们在其中创建了加载容器，然后为其填充颜色并添加动画。之后，我们在容器中添加了第二个标题来显示百分比和一个旋转 360 度的 keyframes 函数。让我们看看代码的输出。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Loading Screen</title>
<style>
body {
background-color: #111;
}
h2 {
color: white;
text-align: center;
margin: 20px 0;
font-size: 70px;
}
.screen {
height: 250px;
margin: auto;
border-radius: 50%;
position: relative;
width: 250px;
top: 20%;
border: 4px solid #DDD;
overflow: hidden;
}
@keyframes rotate {
to {
transform: rotate(358deg);
}
}
.screen::after {
content: "";
position: absolute;
top: 25%;
left: -50%;
height: 300%;
width: 200%;
nimation: rotate 10s linear forwards infinite;
background-color: blue;
border-radius: 50%;
box-shadow: 0 3 10px #4CAF50;
opacity: 0.9;
}
h3 {
color: white;
font-size: 70px;
text-align: center;
position: relative;
top: 14%;
}
</style>
</head>
<body>
<h2>Loading Screen</h2>
<div class="screen">
<h3>50%</h3>
</div>
</body>
</html>
在上面的输出中，您可以看到我们首先声明的标题标签，然后是添加了颜色的容器，该容器显示我们的第二个标题和容器中的动画。动画旋转 360 度，位于百分比标题上方。
示例
以下是另一个创建高级加载画面的示例。在下面的示例中，我们声明了一个 div 元素，然后为其指定一个类，以便使用 CSS 属性对其进行样式设置。我们在边框中添加了黑色和红色，并为其添加了动画，并使用 keyframes 函数使容器旋转 360 度。上面的代码演示了如何在网页中添加加载画面。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the advanced loading screen</title>
<style>
@keyframes spin {
100% {
transform: rotate(359deg);
}
0% {
transform: rotate(0deg);
}
}
.load {
border-bottom: 14px solid black;
border-right: 14px solid red;
border-left: 14px solid red;
border-top: 14px solid black;
border-radius: 49%;
width: 120px;
animation: spin 3s linear infinite;
height: 120px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load"></div>
</body>
</html>
在输出中，您可以看到两种颜色旋转 360 度，给用户一种页面正在加载的印象。您可以使用对齐属性将加载器对齐到页面的中心。
注意 - keyframes 属性是 CSS 的一个属性，它使开发者能够动画化 HTML 元素，而且无需使用 JavaScript，这些 keyframes 指定了元素将具有的样式。
keyframes 属性指定动画运行的时间量，使用的过渡应该平滑且准确。应指定百分比，并且开发者必须确保动画与所有浏览器兼容。
结论
网页开发者使用不同类型的样式和动画来创建加载画面，具体取决于他们正在处理的项目。使加载画面有所不同并付出创造性的努力至关重要，因为用户通常会因加载画面的外观和页面加载时间而分心。这些加载画面的主要目标是使网站具有交互性，而不是在页面加载/初始化需要很长时间时让用户感到厌烦。
860 次浏览
