CSS3实现1前端常用Loading效果

小咪咪 2021-10-24 04:36 292阅读 0赞

此页动画效果都是gif图的，不想用代码写的话，下载图片就可使用。

第1种效果：

![1086124-20170308160012500-1342891376.gif][]

代码如下

.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种效果：

![1086124-20170308160150406-1889507827.gif][]

代码如下：

1 <div class="loading">
     2         <span></span>
     3 </div>
     4 
     5 .loading{
     6             width: 150px;
     7             height: 4px;
     8             border-radius: 2px;
     9             margin: 0 auto;
    10             margin-top:100px;
    11             position: relative;
    12             background: lightgreen;
    13             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    14         }
    15         .loading span{
    16             display: inline-block;
    17             width: 16px;
    18             height: 16px;
    19             border-radius: 50%;
    20             background: lightgreen;
    21             position: absolute;
    22             margin-top: -7px;
    23             margin-left:-8px;
    24             -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    25         }
    26         @-webkit-keyframes changeBgColor{
    27             0%{
    28                 background: lightgreen;
    29             }
    30             100%{
    31                 background: lightblue;
    32             }
    33         }
    34         @-webkit-keyframes changePosition{
    35             0%{
    36                 background: lightgreen;
    37             }
    38             100%{
    39                 margin-left: 142px;
    40                 background: lightblue;
    41             }
    42         }

第3-5种效果：

![1086124-20170308160406766-8387682.gif][]![1086124-20170308160413109-326042178.gif][]![1086124-20170308160421813-842595112.gif][]

代码如下：

第3-5种效果的css样式分别为：

.loading{
        
                width: 150px;
                height: 15px;
                margin: 0 auto;
                margin-top:100px;
            }
            .loading span{
        
                display: inline-block;
                width: 15px;
                height: 100%;
                margin-right: 5px;
                border-radius: 50%;
                background: lightgreen;
                -webkit-animation: load 1.04s ease infinite;
            }
            .loading span:last-child{
        
                margin-right: 0px; 
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                }
                100%{
        
                    opacity: 0;
                }
            }
            .loading span:nth-child(1){
        
                -webkit-animation-delay:0.13s;
            }
            .loading span:nth-child(2){
        
                -webkit-animation-delay:0.26s;
            }
            .loading span:nth-child(3){
        
                -webkit-animation-delay:0.39s;
            }
            .loading span:nth-child(4){
        
                -webkit-animation-delay:0.52s;
            }
            .loading span:nth-child(5){
        
                -webkit-animation-delay:0.65s;
            }

.loading{
        
                width: 150px;
                height: 15px;
                margin: 0 auto;
                margin-top:100px;
            }
            .loading span{
        
                display: inline-block;
                width: 15px;
                height: 100%;
                margin-right: 5px;
                border-radius: 50%;
                background: lightgreen;
                -webkit-animation: load 1.04s ease infinite;
            }
            .loading span:last-child{
        
                margin-right: 0px; 
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                    -webkit-transform: scale(1.3);
                }
                100%{
        
                    opacity: 0.2;
                    -webkit-transform: scale(.3);
                }
            }
            .loading span:nth-child(1){
        
                -webkit-animation-delay:0.13s;
            }
            .loading span:nth-child(2){
        
                -webkit-animation-delay:0.26s;
            }
            .loading span:nth-child(3){
        
                -webkit-animation-delay:0.39s;
            }
            .loading span:nth-child(4){
        
                -webkit-animation-delay:0.52s;
            }
            .loading span:nth-child(5){
        
                -webkit-animation-delay:0.65s;
            }

.loading{
        
                width: 150px;
                height: 15px;
                margin: 0 auto;
                position: relative;
                margin-top:100px;
            }
            .loading span{
        
                position: absolute;
                width: 15px;
                height: 100%;
                border-radius: 50%;
                background: lightgreen;
                -webkit-animation: load 1.04s ease-in infinite alternate;
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                    -webkit-transform: translate(0px);
                }
                100%{
        
                    opacity: 0.2;
                    -webkit-transform: translate(150px);
                }
            }
            .loading span:nth-child(1){
        
                -webkit-animation-delay:0.13s;
            }
            .loading span:nth-child(2){
        
                -webkit-animation-delay:0.26s;
            }
            .loading span:nth-child(3){
        
                -webkit-animation-delay:0.39s;
            }
            .loading span:nth-child(4){
        
                -webkit-animation-delay:0.52s;
            }
            .loading span:nth-child(5){
        
                -webkit-animation-delay:0.65s;
            }

第6-8种效果：

![1086124-20170308160617500-1955300701.gif][]![1086124-20170308160623828-1686730473.gif][]![1086124-20170308160630094-628485315.gif][]

代码如下：

第6-8种效果的css样式分别为：

.loading{
        
                width: 150px;
                height: 15px;
                margin: 0 auto;
                margin-top:100px;
                text-align: center;
            }
            .loading span{
        
                display: inline-block;
                width: 15px;
                height: 100%;
                margin-right: 5px;
                background: lightgreen;
                -webkit-animation: load 1.04s ease infinite;
            }
            .loading span:last-child{
        
                margin-right: 0px; 
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                }
                100%{
        
                    opacity: 0;
                }
            }
            .loading span:nth-child(1){
        
                -webkit-animation-delay:0.13s;
            }
            .loading span:nth-child(2){
        
                -webkit-animation-delay:0.26s;
            }
            .loading span:nth-child(3){
        
                -webkit-animation-delay:0.39s;
            }
            .loading span:nth-child(4){
        
                -webkit-animation-delay:0.52s;
            }
            .loading span:nth-child(5){
        
                -webkit-animation-delay:0.65s;
            }

.loading{
        
                width: 150px;
                height: 15px;
                margin: 0 auto;
                margin-top:100px;
            }
            .loading span{
        
                display: inline-block;
                width: 15px;
                height: 100%;
                margin-right: 5px;
                background: lightgreen;
                -webkit-transform-origin: right bottom;
                -webkit-animation: load 1s ease infinite;
            }
            .loading span:last-child{
        
                margin-right: 0px; 
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                }
                100%{
        
                    opacity: 0;
                    -webkit-transform: rotate(90deg);
                }
            }
            .loading span:nth-child(1){
        
                -webkit-animation-delay:0.13s;
            }
            .loading span:nth-child(2){
        
                -webkit-animation-delay:0.26s;
            }
            .loading span:nth-child(3){
        
                -webkit-animation-delay:0.39s;
            }
            .loading span:nth-child(4){
        
                -webkit-animation-delay:0.52s;
            }
            .loading span:nth-child(5){
        
                -webkit-animation-delay:0.65s;
            }

.loading{
        
                width: 150px;
                height: 15px;
                margin: 0 auto;
                margin-top:100px;
            }
            .loading span{
        
                display: inline-block;
                width: 15px;
                height: 100%;
                margin-right: 5px;
                background: lightgreen;
                -webkit-transform-origin: right bottom;
                -webkit-animation: load 1s ease infinite;
            }
            .loading span:last-child{
        
                margin-right: 0px; 
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                    -webkit-transform: scale(1);
                }
                100%{
        
                    opacity: 0;
                    -webkit-transform: rotate(90deg) scale(.3);
                }
            }
            .loading span:nth-child(1){
        
                -webkit-animation-delay:0.13s;
            }
            .loading span:nth-child(2){
        
                -webkit-animation-delay:0.26s;
            }
            .loading span:nth-child(3){
        
                -webkit-animation-delay:0.39s;
            }
            .loading span:nth-child(4){
        
                -webkit-animation-delay:0.52s;
            }
            .loading span:nth-child(5){
        
                -webkit-animation-delay:0.65s;
            }

第9-10种效果：

![1086124-20170308160819797-1991525109.gif][]![1086124-20170308160826828-988524255.gif][]

.loadEffect{
        
                width: 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;
                margin-top:100px;
            }
            .loadEffect span{
        
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                }
                100%{
        
                    opacity: 0.2;
                }
            }
            .loadEffect span:nth-child(1){
        
                left: 0;
                top: 50%;
                margin-top:-8px;
                -webkit-animation-delay:0.13s;
            }
            .loadEffect span:nth-child(2){
        
                left: 14px;
                top: 14px;
                -webkit-animation-delay:0.26s;
            }
            .loadEffect span:nth-child(3){
        
                left: 50%;
                top: 0;
                margin-left: -8px;
                -webkit-animation-delay:0.39s;
            }
            .loadEffect span:nth-child(4){
        
                top: 14px;
                right:14px;
                -webkit-animation-delay:0.52s;
            }
            .loadEffect span:nth-child(5){
        
                right: 0;
                top: 50%;
                margin-top:-8px;
                -webkit-animation-delay:0.65s;
            }
            .loadEffect span:nth-child(6){
        
                right: 14px;
                bottom:14px;
                -webkit-animation-delay:0.78s;
            }
            .loadEffect span:nth-child(7){
        
                bottom: 0;
                left: 50%;
                margin-left: -8px;
                -webkit-animation-delay:0.91s;
            }
            .loadEffect span:nth-child(8){
        
                bottom: 14px;
                left: 14px;
                -webkit-animation-delay:1.04s;
            }

.loadEffect{
        
                width: 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;
                margin-top:100px;
            }
            .loadEffect span{
        
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }
            @-webkit-keyframes load{
        
                0%{
                    -webkit-transform: scale(1.2);
                    opacity: 1;
                }
                100%{
        
                    -webkit-transform: scale(.3);
                    opacity: 0.5;
                }
            }
            .loadEffect span:nth-child(1){
        
                left: 0;
                top: 50%;
                margin-top:-10px;
                -webkit-animation-delay:0.13s;
            }
            .loadEffect span:nth-child(2){
        
                left: 14px;
                top: 14px;
                -webkit-animation-delay:0.26s;
            }
            .loadEffect span:nth-child(3){
        
                left: 50%;
                top: 0;
                margin-left: -10px;
                -webkit-animation-delay:0.39s;
            }
            .loadEffect span:nth-child(4){
        
                top: 14px;
                right:14px;
                -webkit-animation-delay:0.52s;
            }
            .loadEffect span:nth-child(5){
        
                right: 0;
                top: 50%;
                margin-top:-10px;
                -webkit-animation-delay:0.65s;
            }
            .loadEffect span:nth-child(6){
        
                right: 14px;
                bottom:14px;
                -webkit-animation-delay:0.78s;
            }
            .loadEffect span:nth-child(7){
        
                bottom: 0;
                left: 50%;
                margin-left: -10px;
                -webkit-animation-delay:0.91s;
            }
            .loadEffect span:nth-child(8){
        
                bottom: 14px;
                left: 14px;
                -webkit-animation-delay:1.04s;
            }

第11种效果：

![1086124-20170308160929516-480332676.gif][]

代码为：

<div class="loading">
            <span></span>
    </div>
    
    .loading{
        
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin: 0 auto;
                margin-top:100px;
                position: relative;
                border:5px solid lightgreen;
                -webkit-animation: turn 2s linear infinite;
            }
            .loading span{
        
                display: inline-block;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                left: 50%;
                margin-top: -15px;
                margin-left: -15px;
                -webkit-animation: changeBgColor 2s linear infinite;
            }
            @-webkit-keyframes changeBgColor{
        
                0%{
                    background: lightgreen;
                }
                100%{
        
                    background: lightblue;
                }
            }
            @-webkit-keyframes turn{
        
                0%{
                    -webkit-transform: rotate(0deg);
                    border-color: lightgreen;
                }
                100%{
        
                    -webkit-transform: rotate(360deg);
                    border-color: lightblue;
                }
            }

第12种效果：

![1086124-20170308161024609-994777174.gif][]

代码如下：

<div class="loading">
            <span></span>
    </div>
    
    
    .loading{
        
                width: 150px;
                height: 8px;
                border-radius: 4px;
                margin: 0 auto;
                margin-top:100px;
                position: relative;
                background: lightblue;
                overflow: hidden;
            }
            .loading span{
        
                display:block;
                width: 100%;
                height: 100%;
                border-radius: 3px;
                background: lightgreen;
                -webkit-animation: changePosition 4s linear infinite;
            }
            @-webkit-keyframes changePosition{
        
                0%{
                    -webkit-transform: translate(-150px);
                }
                50%{
        
                    -webkit-transform: translate(0);
                }
                100%{
        
                    -webkit-transform: translate(150px);
                }
            }

第13种效果：

![1086124-20170308161117844-1714236419.gif][]

代码如下：

<div class="loading">
            <span></span>
    </div>
    
    .loading{
        
                width: 200px;
                height: 60px;
                margin: 0 auto;
                margin-top: 100px;
                position: relative;
            }
            .loading span{
        
                width: 50px;
                height: 30px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                top: 50%;
                margin-top: -15px;
                overflow: hidden;
                -webkit-animation: changePosition 2.08s linear infinite;
            }
            @-webkit-keyframes changePosition{
        
                0%,100%{
                    -webkit-transform: translate(70px);
                }
                20%{
        
                    width: 50px;
                    height: 30px;
                    margin-top:-15px;
                    -webkit-transform: translate(0px);
                }
                30%{
        
                    width: 20px;
                    height: 60px;
                    margin-top:-30px;
                    -webkit-transform: translate(0px);
                }
                35%{
        
                    width: 50px;
                    height: 30px;
                    margin-top:-15px;
                    -webkit-transform: translate(5px);
                    background: lightblue;
                }
                70%{
        
                    width: 50px;
                    height: 30px;
                    margin-top:-15px;
                    -webkit-transform: translate(160px);
                }
                80%{
        
                    width: 20px;
                    height: 60px;
                    margin-top:-30px;
                    -webkit-transform: translate(160px);
                }
                85%{
        
                    width: 50px;
                    height: 30px;
                    margin-top:-15px;
                    -webkit-transform: translate(155px);
                    background: lightgreen;
                }
    
            }

第14种效果：

![1086124-20170308161210172-771939411.gif][]

<div class="loadEffect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
    </div>
    
    .loadEffect{
        
                width: 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;
                margin-top:100px;
            }
            .loadEffect span{
        
                display: inline-block;
                width: 30px;
                height: 10px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                background: lightgreen;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }
            @-webkit-keyframes load{
        
                0%{
                    opacity: 1;
                }
                100%{
        
                    opacity: 0.2;
                }
            }
            .loadEffect span:nth-child(1){
        
                left: 0;
                top: 50%;
                margin-top:-5px;
                -webkit-animation-delay:0.13s;
            }
            .loadEffect span:nth-child(2){
        
                left: 10px;
                top: 20px;
                -webkit-transform: rotate(45deg);
                -webkit-animation-delay:0.26s;
            }
            .loadEffect span:nth-child(3){
        
                left: 50%;
                top: 10px;
                margin-left: -15px;
                -webkit-transform: rotate(90deg);
                -webkit-animation-delay:0.39s;
            }
            .loadEffect span:nth-child(4){
        
                top: 20px;
                right:10px;
                -webkit-transform: rotate(135deg);
                -webkit-animation-delay:0.52s;
            }
            .loadEffect span:nth-child(5){
        
                right: 0;
                top: 50%;
                margin-top:-5px;
                -webkit-transform: rotate(180deg);
                -webkit-animation-delay:0.65s;
            }
            .loadEffect span:nth-child(6){
        
                right: 10px;
                bottom:20px;
                -webkit-transform: rotate(225deg);
                -webkit-animation-delay:0.78s;
            }
            .loadEffect span:nth-child(7){
        
                bottom: 10px;
                left: 50%;
                margin-left: -15px;
                -webkit-transform: rotate(270deg);
                -webkit-animation-delay:0.91s;
            }
            .loadEffect span:nth-child(8){
        
                bottom: 20px;
                left: 10px;
                -webkit-transform: rotate(315deg);
                -webkit-animation-delay:1.04s;
            }

第15种效果：

![1086124-20170308161322766-1505167724.gif][]

<div class="loadEffect">
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
    </div>
    
    .loadEffect {
        
                width: 100px;
                height: 100px;
                margin: 0 auto;
                margin-top:100px;
                position: relative;
            }
            .loadEffect div{
        
                width: 100%;
                height: 100%;
                position: absolute;
                -webkit-animation: load 2.08s linear infinite;
            }
            .loadEffect div span{
        
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                left: 50%;
                margin-top: -10px;
                margin-left: -10px;
            }
            @-webkit-keyframes load{
        
                0%{
                    -webkit-transform: rotate(0deg);
                }
                10%{
        
                    -webkit-transform: rotate(45deg);
                }
                50%{
        
                    opacity: 1;
                    -webkit-transform: rotate(160deg);
                }
                62%{
        
                    opacity: 0;
                }
                65%{
        
                    opacity: 0;
                    -webkit-transform: rotate(200deg);
                }
                90%{
        
                    -webkit-transform: rotate(340deg);
                }
                100%{
        
                    -webkit-transform: rotate(360deg);
                }
    
            }
            .loadEffect div:nth-child(1){
        
                -webkit-animation-delay:0.2s;
            }
            .loadEffect div:nth-child(2){
        
                -webkit-animation-delay:0.4s;
            }
            .loadEffect div:nth-child(3){
        
                -webkit-animation-delay:0.6s;
            }
            .loadEffect div:nth-child(4){
        
                -webkit-animation-delay:0.8s;
            }

第16种效果：

![1086124-20170308161408875-2032482596.gif][]

<div class="loading">
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
    </div>
    
    .loading{
        
                width: 60px;
                height: 60px;
                margin: 0 auto;
                margin-top:100px;
                position: relative;
                -webkit-animation: load 3s linear infinite;
            }
            .loading div{
        
                width: 100%;
                height: 100%;
                position: absolute;
            }
            .loading span{
        
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #99CC66;
                position: absolute;
                left: 50%;
                margin-top: -10px;
                margin-left: -10px;
                -webkit-animation: changeBgColor 3s ease infinite;
            }
            @-webkit-keyframes load{
        
                0%{
                    -webkit-transform: rotate(0deg);
                }
                33.3%{
        
                    -webkit-transform: rotate(120deg);
                }
                66.6%{
        
                    -webkit-transform: rotate(240deg);
                }
                100%{
        
                    -webkit-transform: rotate(360deg);
                }
            }
            @-webkit-keyframes changeBgColor{
        
                0%,100%{
                    background: #99CC66;
                }
                33.3%{
        
                    background: #FFFF66;
                }
                66.6%{
        
                    background: #FF6666;
                }
            }
            .loading div:nth-child(2){
        
                -webkit-transform: rotate(120deg);
            }
            .loading div:nth-child(3){
        
                -webkit-transform: rotate(240deg);
            }
            .loading div:nth-child(2) span{
        
                -webkit-animation-delay: 1s;
            }
            .loading div:nth-child(3) span{
        
                -webkit-animation-delay: 2s;
            }

转载于:https://www.cnblogs.com/haonanZhang/p/6519942.html

[1086124-20170308160012500-1342891376.gif]: /images/20211023/0859ec3b9260455e83eec2e69011357e.png
[1086124-20170308160150406-1889507827.gif]: /images/20211023/d4910e5cc70b4b6e8f0fb9b8666c7ca4.png
[1086124-20170308160406766-8387682.gif]: https://images2015.cnblogs.com/blog/1086124/201703/1086124-20170308160406766-8387682.gif
[1086124-20170308160413109-326042178.gif]: https://images2015.cnblogs.com/blog/1086124/201703/1086124-20170308160413109-326042178.gif
[1086124-20170308160421813-842595112.gif]: /images/20211023/4a5ab01b71ed4f6d9389f75832202997.png
[1086124-20170308160617500-1955300701.gif]: https://images2015.cnblogs.com/blog/1086124/201703/1086124-20170308160617500-1955300701.gif
[1086124-20170308160623828-1686730473.gif]: https://images2015.cnblogs.com/blog/1086124/201703/1086124-20170308160623828-1686730473.gif
[1086124-20170308160630094-628485315.gif]: /images/20211023/d1cd4f6803f343c29be5cb6a3e909fb8.png
[1086124-20170308160819797-1991525109.gif]: https://images2015.cnblogs.com/blog/1086124/201703/1086124-20170308160819797-1991525109.gif
[1086124-20170308160826828-988524255.gif]: /images/20211023/282f14afc465458da4857b4d0ad07f14.png
[1086124-20170308160929516-480332676.gif]: /images/20211023/e4dd3179917d455998498d3f0e518727.png
[1086124-20170308161024609-994777174.gif]: /images/20211023/e0d8acb8aee34b59b2325e428c3df348.png
[1086124-20170308161117844-1714236419.gif]: /images/20211023/c26cae9781d2404794afd8b5b85586b0.png
[1086124-20170308161210172-771939411.gif]: /images/20211023/881ffb80138c429faa6101a9af4f1059.png
[1086124-20170308161322766-1505167724.gif]: /images/20211023/05fb4d081f724e6ba0c4503f65ff1bc2.png
[1086124-20170308161408875-2032482596.gif]: /images/20211023/6dfffc1a70df4a479a20b006fd599f95.png