国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS練習(xí)實現(xiàn)多種loading

Jrain / 3020人閱讀

摘要：核心代碼傳送門核心代碼傳送門核心代碼傳送門核心代碼傳送門參考實現(xiàn)種效果未完待續(xù)

One

核心代碼:

  .loading{
        width: 70px;
        height: 200px;
        margin: auto;
        display: flex;
    }
    .loading span{
        display: inline-block;
        width: 8px;
        height: 40px;
        border-radius: 4px;
        background: #91d5ff;
        margin: auto;
        -webkit-animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 40px;
            background: #91d5ff;
        }
        50%{
            height: 80px;
            background: #40a9ff;
        }
    }
    .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;
    }

jsfiddle傳送門

Two

核心代碼:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:8px;
   background:#91d5ff;
   border-radius:4px;
   margin:auto;
   display: flex;
   align-items:center;
   -webkit-animation: load 1.2s ease-in-out infinite alternate;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  -webkit-animation: loadSpan 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes load{
  0%{
      background:#91d5ff;
  }  
  100%{
      background:#69c0ff;
    }
}

@-webkit-keyframes loadSpan{
  0%{
      background:#91d5ff;
  }  
  100%{
      margin-left:142px;
      background:#69c0ff;
    }
}

jsfiddle傳送門

Three

核心代碼:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
    }
}

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

jsfiddle傳送門

Four

核心代碼:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1.2s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
      -webkit-transform: scale(0.3);
    }
}

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

jsfiddle傳送門

ps:參考CSS3實現(xiàn)18種Loading效果

未完待續(xù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92115.html

相關(guān)文章

  • CSS練習(xí)實現(xiàn)多種loading

    摘要：核心代碼傳送門核心代碼傳送門核心代碼傳送門核心代碼傳送門參考實現(xiàn)種效果未完待續(xù) One showImg(https://segmentfault.com/img/bV0fDv?w=294&h=242); 核心代碼: .loading{ width: 70px; height: 200px; margin: auto; ...

    Lavender 評論0 收藏0

  • 前端實例練習(xí) - 加載動效按鈕

    摘要：加載動效按鈕代碼儲存在效果預(yù)覽初衷很多人在初學(xué)前端的時候都會問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。 加載動效按鈕 代碼儲存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時候都會問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的 入門級...

    SmallBoyO 評論0 收藏0

  • 前端實例練習(xí) - 加載動效按鈕

    摘要：加載動效按鈕代碼儲存在效果預(yù)覽初衷很多人在初學(xué)前端的時候都會問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。 加載動效按鈕 代碼儲存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時候都會問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的 入門級...

    Aomine 評論0 收藏0

  • 前端實例練習(xí) - 加載動效按鈕

    摘要：加載動效按鈕代碼儲存在效果預(yù)覽初衷很多人在初學(xué)前端的時候都會問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。 加載動效按鈕 代碼儲存在Github效果預(yù)覽 初衷：很多人在初學(xué)前端的時候都會問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對于目前網(wǎng)絡(luò)上所能看到的 入門級...

    EsgynChina 評論0 收藏0

  • 現(xiàn)代后端開發(fā)者必備技能-2018版

    摘要：現(xiàn)在開始創(chuàng)建一個包并分發(fā)給其他人使用，并確保遵循你迄今為止學(xué)到的標(biāo)準(zhǔn)和最佳實踐。第步實踐對于練習(xí)，繼續(xù)編寫單元測試，以完成目前為止所做的實際任務(wù)，特別是你在步驟中所做的練習(xí)。 今天的Web開發(fā)與幾年前完全不同，有很多不同的東西可以很容易地阻止任何人進入Web開發(fā)。這是我們決定制作這些循序漸進的視覺指南的原因之一，這些指南展示了更大的圖景，并讓任何人清楚了解他們在網(wǎng)頁開發(fā)中扮演的角色。 ...

    eternalshallow 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<