CSS3实现10种Loading效果

最新推荐文章于 2024-09-02 06:30:12 发布

永远的新手

最新推荐文章于 2024-09-02 06:30:12 发布

阅读量218

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/learn8more/article/details/108017777

版权

这篇博客分享了作者使用CSS3实现的10种不同的Loading效果，包括各自的代码示例，虽然简单但实用。文章中详细列出了每种效果的CSS样式，虽然存在代码重复，但方便日后直接应用。

摘要由CSDN通过智能技术生成

昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

代码如下：

复制代码

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

复制代码

.loading{
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
        }

复制代码

第2种效果：

代码如下：

<div class="loading">
        <span></span>
</div>

复制代码

.loading{
            width: 150px;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightgreen;
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
        }
        .loading span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            margin-top: -7px;
            margin-left:-8px;
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes changePosition{
            0%{
                background: lightgreen;
            }
            100%{
                margin-left: 142px;
                background: lightblue;
            }
        }

复制代码

第3-5种效果：