成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Lavender / 2946人閱讀

摘要：核心代碼傳送門核心代碼傳送門核心代碼傳送門核心代碼傳送門參考實(shí)現(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實(shí)現(xiàn)18種Loading效果

未完待續(xù)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112857.html

相關(guān)文章

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

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

    Jrain 評(píng)論0 收藏0

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

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

    SmallBoyO 評(píng)論0 收藏0

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

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

    Aomine 評(píng)論0 收藏0

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

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

    EsgynChina 評(píng)論0 收藏0

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

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

    eternalshallow 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<