如何使用 CSS 在 loader 中设置徽标？

百变鹏仔 4个月前 (09-19) #CSS

文章标签徽标

要开始回答这个问题，我们首先需要创建一个“加载器”。任何通知用户或访问者页面正在加载并且需要几秒钟才能完成加载的动画都称为加载器。

大多数情况下，当网站检索结果的时间过长时，加载器就会派上用场。如果某个特定网站没有 CSS 加载器，用户会认为它在加载过程中根本没有响应。

因此，向网页添加 CSS 加载器会导致用户分心或等待一段时间才能正确加载页面。一个简单的动画不会给人留下网站没有响应的印象，而是表明网站仍在检索结果并且网页将在几秒钟内准备就绪。

您可以使用 CSS 添加样式、动画或任何其他形式的样式来创建加载程序。

示例

我们现在将使用 CSS 创建互联网上最常见的加载程序形式。

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

<!DOCTYPE html><html><head>   <title>Example of a loader using CSS</title>   <style>      h1 {         color: rgb(0, 128, 111);      }      .loader {         display: block;         position: absolute;         width: 15px;         height: 15px;         left: calc(50% - 1.25em);         border-radius: 1.25em;         transform-origin: 1.25em 2.25em;         animation: rotateAnimation;         animation-iteration-count: infinite;         animation-duration: 1.85s;      }      @keyframes rotateAnimation {         from {            transform: rotateZ(0deg);         }         to {            transform: rotateZ(360deg);         }      }      .item1 {         animation-delay: 0.12s;         background-color: #1b7842;      }      .item2 {         animation-delay: 0.22s;         background-color: #239b53;      }      .item3 {         animation-delay: 0.32s;         background-color: #2ecc72;      }      .item4 {         animation-delay: 0.42s;         background-color: #82e0a0;      }      .item5 {         animation-delay: 0.52s;         background-color: #d5f5de;      }   </style></head><body>   <center>      <h1>Loader in CSS</h1>      <h4>Example of the most common form of loader in CSS</h4>      <div>         <div class="loader item1"></div>         <div class="loader item2"></div>         <div class="loader item3"></div>         <div class="loader item4"></div>         <div class="loader item5"></div>      </div>   </center></body></html>

示例

这是另一种形式的在水平轴上动画的加载程序。

<!DOCTYPE html><html><head>   <title>Example of a loader using CSS</title>   <style>      h1 {         color: rgb(0, 128, 111);      }      .loader {         display: block;         position: absolute;         width: 150px;         height: 15px;         left: calc(58% - 5.25em);         transform-origin: 2px 20px;         animation: rotateAnimation;         animation-iteration-count: infinite;         animation-duration: 2.85s;      }      @keyframes rotateAnimation {         from {            transform: rotateY(55deg);         }         to {            transform: rotateY(360deg);         }      }      .item1 {         animation-delay: 0.12s;         background-color: #1b7842;      }      .item2 {         animation-delay: 0.22s;         background-color: #239b53;      }      .item3 {         animation-delay: 0.32s;         background-color: #2ecc72;      }      .item4 {         animation-delay: 0.42s;         background-color: #82e0a0;      }      .item5 {         animation-delay: 0.52s;         background-color: #d5f5de;      }   </style></head><body>   <center>      <h1>Loader in CSS</h1>      <h4>Example of the most common form of loader in CSS</h4>      <div>         <div class="loader item1"></div>         <div class="loader item2"></div>         <div class="loader item3"></div>         <div class="loader item4"></div>         <div class="loader item5"></div>      </div>   </center> </body></html>

在加载器中添加徽标

现在我们知道了如何在 CSS 中制作加载器，现在我们将继续讨论如何在刚刚创建的加载器中添加徽标。

让我们首先尝试理解为什么我们可能需要在加载器内添加徽标。徽标是品牌的标记和身份，品牌为用户体验增添了个人风格。如今，所有网站都使用个性化加载程序，每当用户登陆其网站时，都会对其品牌产生积极影响。

算法

我们将遵循创建嵌入徽标的加载程序的算法如下 -

第 1 步- 为了包含我们的加载程序，我们将构建一个 HTML 文件并将 HTML div 添加到该文件的正文中。
第 2 步 - 为了提供我们的徽标和加载器动画效果，我们将编写 CSS 文件或使用样式标签嵌入它。
第 3 步 - 使用 div 标签中的标签插入徽标，以便它现在显示在加载器类中

下面给出了我们可以用于加载程序的属性 -

我们会根据Logo定制边框、颜色、高度、宽度，大大提高整体一致性，增加品牌原创性。
要添加逐渐变化的动画，我们将利用 CSS 中的 @keyframes 规则。
然后，为了使加载器旋转，我们将使用 CSS 的 Transform 属性。

我们将设计徽标图像的尺寸，使其小于或等于装载机的尺寸。我们将添加相反方向的动画样式，以抵消徽标旋转的效果。

示例

下面是一个使用上述算法向网站添加加载程序的示例。

<!DOCTYPE html><html lang="en"><head>   <style type="text/css">      .loaderClass {         border: 12px solid #dcd7d7;         border-top: 12px solid #04802f;         border-radius: 50%;         width: 120px;         height: 120px;         animation: SpinLoader 2.5s linear infinite;      }      .loaderClass img {         height: 120px;         width: 120px;         border-radius: 50%;         animation: LogoModify 2.5s linear infinite;      }      @keyframes SpinLoader {         0% {            transform: rotate(0deg);         }         100% {            transform: rotate(360deg);         }      }      @keyframes LogoModify {         0% {            transform: rotate(360deg);         }         100% {            transform: rotate(0deg);         }      }   </style></head><body>   <div class="loaderClass">      <img src="https://img.php.cn/upload/article/000/887/227/169555783454341.jpg" alt="logoImage">   </div></body></html>

结论

总而言之，使用 CSS 在加载器中设置徽标是一项简单的任务。您需要做的就是设置徽标的宽度和高度，然后使用“背景图像”属性将其添加为加载程序的背景图像。您还可以使用“background-position”或“margin”属性来调整其位置，并使用其他样式选项（如边框、框阴影等）进一步自定义它。凭借 CSS 的一些基本知识，您可以轻松创建带有徽标的漂亮加载程序。时间！

文章推荐

如何使用 CSS 在 loader 中设置徽标？

示例

示例

在加载器中添加徽标

算法

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写