📌  相关文章
📜  如何使用 CSS 在加载器中设置徽标？

📅  最后修改于: 2021-11-07 09:07:18             🧑  作者: Mango

在本文中，我们将学习如何使用 CSS 在加载器中设置徽标。

加载器是提醒访问者/用户当前正在加载的页面的任何动画，您必须等待几秒钟才能完全加载。当任何网站获取结果的时间过长时，加载器通常会很有帮助，而不是给人一种网站无响应的印象，它提供一个简单的动画，表明网站仍在获取结果，网页将在几秒钟内准备好。

要了解如何在 CSS 中添加加载器类，您可以参考以下文章。

  1. 如何制作 CSS 加载器？
  2. 如何使用 HTML 和 CSS 创建动画加载器环？

在装载机内添加公司的标志为用户提供了个人风格，这是代替普通装载机的常见做法。

方法：

  1. 我们将创建一个 HTML 文件，在其中我们将在正文中添加一个 HTML div 以在其中添加我们的加载器。
  2. 我们创建了一个 CSS 文件来为我们的徽标和加载程序提供动画效果。
  3. 我们使用 标签将 CSS 文件链接到我们的 HTML 文档，或者可以使用        
                 
      

CSS：在本节中，我们定义了文档的样式以使其看起来有吸引力，并且所有动画都添加到此处。

我们的 CSS 文件的创建将遵循以下步骤。

  1. 添加加载器类属性
    • 根据你要制作的loader的风格添加合适的边框尺寸、颜色、半径、高度、宽度等。
    • 对于动画部分，我们将使用@keyframes 规则，该规则允许动画以一定的时间间隔从当前样式逐渐变为新样式。
    • 然后最后我们将使用 CSS Transform 属性将动画顺时针旋转 360 度。
  2. 添加徽标类属性
    • 在 CSS 文件中，我们将徽标称为“.loader img”，因为我们在包含 loader 类的 div 标签中声明了图像标签。
    • 我们定义了 logo 的高度和宽度（最好小于或等于 loader 类），以便它留在 loader 内。
    • 最后，我们添加一个与加载器相同的关键帧和动画属性，但不是顺时针旋转，而是逆时针旋转，以创建实际固定而不是随加载器旋转的效果。

注意：我们必须以相反的方向旋转徽标，因为我们已经在加载器类中定义了徽标，并且加载器类中定义的所有属性也适用于徽标，因此为了消除旋转效果，我们将徽标旋转为逆时针方向，因此徽标看起来是静止的。

样式文件

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #048023; /* Dark Green */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spinloader 2s linear infinite;
}
.loader img{
    height : 120px;
    width : 120px;
    animation: spinlogo 2s linear infinite;
}
@keyframes spinloader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spinlogo {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

完整代码：在本节中，我们将结合以上两段代码，即 HTML 和 CSS 代码。

索引.html 



  

    

  

    

        
    


  

输出：