首頁手記 CSS3實現18種Loading效果

CSS3實現18種Loading效果

標簽：

CSS3

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

第1种效果：

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

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

loading6

loading7

loading8

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

loading9

CSS样式分别为：

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

       .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 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{                height: 40px;                background: lightgreen;
            }
            50%{                height: 60px;                margin-top: -20px;                background: lightblue;
            }
        }        .loading span:nth-child(2){            -webkit-animation-delay:0.13s;
        }        .loading span:nth-child(3){            -webkit-animation-delay:0.26s;
        }        .loading span:nth-child(4){            -webkit-animation-delay:0.39s;
        }        .loading span:nth-child(5){            -webkit-animation-delay:0.52s;
        }

第12种效果：

.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;
            }
        }

第13种效果：

.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;                -webkit-transform: scale(1.2);
            }
            100%{                opacity: .2;                -webkit-transform: scale(.2);
            }
        }        .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;
        }

第四14种效果：

.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);
            }
        }

第15种效果：

.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;
            }

        }

第16种效果：

.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;
        }

第17种效果：

.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;
        }

第18种效果：

.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;
        }

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

作者：JR93
链接：https://www.jianshu.com/p/6ac3e3e12d61

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

SMILET

手記
篇

粉絲

80

獲贊與收藏

441

關注作者，訂閱最新文章

閱讀免費教程

CSS3 入門教程

34個小節 63778 738

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13213 249

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

CSS3實現18種Loading效果

閱讀免費教程