CSS3實現(xiàn)8種Loading效果【第二波】

作者：郭錦榮
原文地址：http://www.cnblogs.com/jr1993/p/4625628.html

CSS3.jpg

今晚吃完飯回宿舍又搗鼓了另外幾種Loading效果锄弱，老規(guī)矩帆喇，直接“上菜“……

注： gif圖片動畫有些卡頓都毒，非實際效果臂外！

第一種效果：

效果1

代碼如下：

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

CSS樣式如下：

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

第二種效果：

效果2

代碼如下：

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

CSS樣式如下：

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

第三種效果：

效果3

代碼如下：

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

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

第四種效果：

效果4

代碼如下：

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

CSS樣式如下：

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

第五種效果：

效果5

代碼如下：

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

CSS樣式如下：

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

        }

第六種效果：

效果6

代碼如下：

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

CSS樣式如下：

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

第七種效果：

效果7

代碼如下：

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

CSS樣式如下：

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

第八種效果：

效果8

代碼如下：

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

CSS樣式如下：

.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樣式代碼沒怎么整理真仲，雖然東西簡單袋马，但是也是需要一些時間去做出來。所以秸应，歡迎轉(zhuǎn)載和使用飞蛹，不過轉(zhuǎn)載還是得注明一下出處，謝謝灸眼！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末卧檐，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子焰宣，更是在濱河造成了極大的恐慌霉囚，老刑警劉巖，帶你破解...
    沈念sama閱讀 222,183評論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件匕积，死亡現(xiàn)場離奇詭異盈罐，居然都是意外死亡，警方通過查閱死者的電腦和手機闪唆，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門盅粪，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人悄蕾，你說我怎么就攤上這事票顾〈「。” “怎么了？”我有些...
    開封第一講書人閱讀 168,766評論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵奠骄，是天一觀的道長豆同。 經(jīng)常有香客問我，道長含鳞，這世上最難降的妖魔是什么影锈？ 我笑而不...
    開封第一講書人閱讀 59,854評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮蝉绷，結(jié)果婚禮上鸭廷，老公的妹妹穿的比我還像新娘。我一直安慰自己熔吗，他們只是感情好靴姿，可當我...
    茶點故事閱讀 68,871評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著磁滚，像睡著了一般佛吓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上垂攘，一...
    開封第一講書人閱讀 52,457評論 1贊 311
  • 城市分裂傳說
    那天维雇，我揣著相機與錄音，去河邊找鬼晒他。 笑死吱型，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的陨仅。 我是一名探鬼主播津滞，決...
    沈念sama閱讀 40,999評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼灼伤！你這毒婦竟也來了触徐？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,914評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤狐赡，失蹤者是張志新（化名）和其女友劉穎撞鹉，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體颖侄，經(jīng)...
    沈念sama閱讀 46,465評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡鸟雏，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了览祖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孝鹊。...
    茶點故事閱讀 40,675評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖展蒂，靈堂內(nèi)的尸體忽然破棺而出又活，到底是詐尸還是另有隱情苔咪，我是刑警寧澤，帶...
    沈念sama閱讀 36,354評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布皇钞，位于F島的核電站悼泌，受9級特大地震影響松捉，放射性物質(zhì)發(fā)生泄漏夹界。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一隘世、第九天 我趴在偏房一處隱蔽的房頂上張望可柿。 院中可真熱鬧，春花似錦丙者、人聲如沸复斥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0贊 25
  • 一樁弒父案械媒，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽目锭。三九已至，卻和暖如春纷捞，著一層夾襖步出監(jiān)牢的瞬間痢虹，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工主儡， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留奖唯，地道東北人。 一個月前我還...
    沈念sama閱讀 49,091評論 3贊 378
  • 代替公主和親
    正文 我出身青樓糜值，卻偏偏與公主長得像丰捷，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子寂汇，可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2贊 360

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,304評論 25贊 707
  • 昨晚用CSS3實現(xiàn)了幾種常見的Loading效果病往，雖然很簡單，但還是分享一下骄瓣，順便也當是做做筆記…… 第1種效果：...
    JR93閱讀 53,113評論 10贊 196
  • 作者：郭錦榮原文地址：http://www.cnblogs.com/jr1993/p/4622039.html 昨...
    IT程序獅閱讀 1,268評論 0贊 11
  • 文 | 玉茗公子 幫我停住時間 和我雙手緊握 給我更多的如果 如果沒有明天 如果還有來生 如果誰能聽得見 我們的愛...
    玉茗公子閱讀 238評論 0贊 4
  • 項目案例 十分鐘人人能學會開發(fā)開源中國 整個項目視頻如下： 一行代碼開發(fā)開源中國資訊頁面 一分鐘給RecyView...
    仕明同學閱讀 564評論 0贊 7