快速 CSS：为您的下一个网站制作无限加载动画。加载动画视频教程，让我们开始吧！您可能觉得有用的文章

2025-05-28

快速 CSS：为您的下一个网站制作无限加载动画。

加载动画

视频教程

让我们开始吧

您可能觉得有用的文章

大家好，欢迎！今天我们来学习一个 CSS 教程，学习如何制作渐变加载动画。

加载动画

想知道如何制作加载动画吗？让我们看看如何轻松制作一个。

视频教程

让我们开始吧

所以，从基本的 HTML 结构开始。然后，创建一个包含我们加载器的<div>类loading-box。并在其中创建另一个<div>包含类loader。



<div class="loading-box">
    <div class="loader"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

首先，对于造型，给出基本风格。



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fefefe;
}

.loading-box{
    position: relative;
    width: 400px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #ededed;
    overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 CSS 中，我们使用弹性框来将加载框居中。

输出

捕获

现在，样式加载器。




.loader{

    width: 100%;

    height: 100%;

    position: absolute;

    border-radius: 50px;

    background: linear-gradient(45deg, #b6b5ff, #ff9797);

    left: 0%;

}
Enter fullscreen mode Exit fullscreen mode



输出

捕获-2

可以看到，加载器部分已经完成了，现在来制作动画。正如你所注意到的，我们left设置了属性来0%改变加载器-100%，并赋予动画效果。




.loader{

    left: -100%;

    animation: load 3s linear infinite;

}



@keyframes load{

    0%{

        left: -100%;

    }

    100%{

        left: 100%;

    }

}
Enter fullscreen mode Exit fullscreen mode



输出

无标题设计 (2)

好了，完成了。希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区告诉我。

您可能觉得有用的文章

  1. CSS 位置
  2. CSS媒体查询
  3. CSS 弹性框

如果你喜欢，可以订阅我的YouTube频道。我创作了很棒的网页内容。订阅

感谢您的阅读。

文章来源：https://dev.to/themodernweb/quick-css-make-infinity-loading-animation-for-your-next-website-187k
Devto 翻译
PREV
为什么学习编程如此困难
NEXT
如何使用 HTML 和 CSS 制作 Instagram 克隆版。完全响应式设计。视频教程和代码教程可能会对您有所帮助。