CSS 创建一个高级加载屏幕
在浏览一个网站的不同页面时,开发人员必须在网站上添加一个加载屏幕;这样就有足够的时间让网站在各网页之间穿行。加载屏幕是一种有效的方式,用户可以在网站页面加载/初始化时等待。
如何创建加载屏幕
为了创建一个加载屏幕,我们可以使用HTML和CSS。首先,我们将创建一个div元素,在其中给出一个标题标签,显示百分比。
然后我们将使用CSS属性如border-radius来指定高度和宽度,并为加载元素添加动画。我们还将使用over-flow属性来隐藏该元素,这样我们就可以只看到主要内容。
语法
下面是溢出属性的语法:
p {
overflow: hidden/ visible/ scroll/ auto;
}
在上面的语法中,你可以看到与overflow属性一起使用的值可以是隐藏元素的hidden值,使元素可见的visible值,以及在隐藏元素的同时增加一个滑块的scroll属性。
让我们看一个例子来更好地理解加载屏幕。
示例
在下面给出的代码中,我们声明了标题标签,并声明了一个div容器,在这里我们做了我们的加载容器,然后用一种颜色填充它,并添加了一个动画。之后,我们在容器中添加了第二个标题,以显示百分比和一个关键帧函数,它可以旋转360度。让我们看一下代码的输出。
<!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属性对该元素进行样式设计。我们为边框添加了黑色和红色,并给它一个动画,使用关键帧函数使容器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>
在输出中,你可以看到2种颜色360度旋转,给用户一个正在加载页面的印象。你可以通过使用align属性将加载器对齐到页面的中心。
注意 – 关键帧属性是CSS的一个属性,它使开发者能够在不使用JavaScript的情况下对HTML元素进行动画处理,这些关键帧指定了该元素将具有的样式。
关键帧属性规定了动画必须运行的时间,所使用的过渡应该是平滑和准确的。应指定百分比,开发者必须确保动画与所有浏览器兼容。
结论
网络开发人员根据他们正在进行的项目,使用不同类型的风格和动画来创建加载屏幕。使加载屏幕有点不同,并在这方面投入创造性的努力是至关重要的,因为用户通常会被加载屏幕的外观和加载页面的时间所干扰。这些加载屏幕的主要目的是使网站具有互动性,而不是在页面需要大量时间加载/启动时让用户感到厌烦。