使用 CSS 创建高级加载屏幕-css教程-PHP中文网

使用 CSS 创建高级加载屏幕

WBOY

发布： 2023-09-17 23:13:02

转载

622人浏览过

使用 css 创建高级加载屏幕

在浏览网站中的不同页面时，开发人员必须向网站添加加载屏幕；以便网站有足够的时间在网页之间进行遍历。加载屏幕是一种有效的方法，用户可以在网站页面加载/初始化时等待。

如何创建加载屏幕？

要创建一个加载屏幕，我们可以使用HTML和CSS。首先，我们将创建一个div元素，在其中给出一个标题标签，显示百分比。

然后我们将使用 CSS 属性（例如 border-radius）来指定高度和宽度，并向加载元素添加动画。我们还将使用 over-flow 属性来隐藏元素，以便我们只能看到主要内容。

语法

下面是overflow属性的语法 -

立即学习“前端免费学习笔记（深入）”；

p {
   overflow: hidden/ visible/ scroll/ auto;
}

登录后复制

在上述语法中，您可以看到与溢出属性一起使用的值可以是隐藏元素的隐藏值，使元素可见的可见值以及在隐藏元素时添加滑块的滚动属性。

让我们看一个示例以更好地理解加载屏幕。

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

示例

在下面给出的代码中，我们声明了标题标签并声明了一个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属性对元素进行样式设置。我们为边框添加了黑色和红色，并给它添加了一个动画，并使用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 度，给用户一种页面正在加载的印象。您可以使用align 属性将加载器对齐到页面的中心。

注意 - keyframe 属性是 CSS 的一个属性，它使开发人员能够在不使用 JavaScript 的情况下对 HTML 元素进行动画处理，并且这些关键帧指定该元素将具有的样式。

关键帧属性指定动画必须运行的时间量，所使用的过渡应该平滑且准确。应指定百分比，并且开发人员必须确保动画与所有浏览器兼容。

结论

Web 开发人员根据他们正在处理的项目使用不同类型的样式和动画来创建加载屏幕。让加载屏幕有点不同，并为此付出创造性的努力是至关重要的，因为用户通常会因加载屏幕的外观和加载页面所需的时间而分心。这些加载屏幕的主要目的是使网站具有交互性，并且不会在页面需要花费大量时间来加载/启动时让用户感到厌烦。

以上就是使用 CSS 创建高级加载屏幕的详细内容，更多请关注php中文网其它相关文章！