日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何只用CSS完成漂亮的加載

為什么要做加載

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、域名注冊、虛擬主機(jī)、網(wǎng)絡(luò)營銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

只想說, 本文最重要的是對 CSS, 偽元素, keyframe的分享, 以及讀者對這些東西的真正掌握, 我并不是慫恿大家在每一個(gè)頁面的前面都去加一個(gè)酷炫的加載

我是如何做的

不同的頁面, 對加載的設(shè)計(jì)也就可能不同. 本文設(shè)計(jì)的加載適合大多數(shù)頁面.

并且, 本文假設(shè)讀者已經(jīng)非常熟悉偽元素, CSS 動(dòng)畫屬性和keyframe, 如果讀者想重溫, 下面兩篇文章可做參考

  • 學(xué)會(huì)使用 CSS 中的 :after 和 :before
  • keyframe 動(dòng)畫直通車

開始入門

在開始一起構(gòu)建它前, 我們先看看它***的效果

正如你所看到的, 我們將經(jīng)歷 4 個(gè)步驟

  • 邊框一個(gè)接一個(gè)地出現(xiàn)
  • 紅/橙/白色方塊向里滑入
  • 方塊向外劃出
  • 邊框消失

我們只需要 animation-direction: alternate 來完成步驟 1 和 2, 步驟 3 和 步驟 4 我們可以使用 reverse, 另外, 我們可以使用 animation-iteration-count: infinite 重復(fù)動(dòng)畫

首先, 我們先書寫好基本的 HTML 結(jié)構(gòu)

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.     
    4.   
  
  
  
  4.       
    5.   
  
  
  
  5.       
    6.   
  
  
  
  6.       /*  
    7.   
  
  
  
  7.        *  All the CSS for the loader  
    8.   
  
  
  
  8.        *  Minified and vendor prefixed  
    9.   
  
  
  
  9.        */  
    10.   
  
  
  
  10.       
    11.   
  
  
  
  11.     
    12.   
  
  
  
  12.     
    13.   
  
  
  
  13.       
    14.   
  
  
  
  14.         
    15.   
  
  
  
  15.     
  
  •       
  •       
  •       
  •       
  •     
  •   

    • 構(gòu)建 logo 本身

    一開始我們先實(shí)現(xiàn) logo 本身, 而不是最終版本的效果

    父級元素 logo, 不同顏色的方塊都是它的子元素

     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.   
      
  •   
    •   
  •   
    •   
  •   

    我們用 less 來實(shí)現(xiàn)

     
 
 
 
      
  
  
  
  
    1. .logo {  
      2.   
  
  
  
    2.   position: relative;  
      3.   
  
  
  
    3.   width: 100px;  
      4.   
  
  
  
    4.   height: 100px;  
      5.   
  
  
  
    5.   border: 4px solid black;  
      6.   
  
  
  
    6.   box-sizing: border-box;  
      7.   
  
  
  
    7.   background-color: white;   
      8.   
  
  
  
    8.   & > div {  
      9.   
  
  
  
    9.     position: absolute;  
      10.   
  
  
  
    10.   }     
      11.   
  
  
  
    11.   .red {  
      12.   
  
  
  
    12.     top: 0;  
      13.   
  
  
  
    13.     bottom: 0;  
      14.   
  
  
  
    14.     left: 0;  
      15.   
  
  
  
    15.     width: 27%;  
      16.   
  
  
  
    16.     border-right: 4px solid black;  
      17.   
  
  
  
    17.     background-color: #EA5664;  
      18.   
  
  
  
    18.   } 
      19.   
  
  
  
    19.   /* Similar code for div.orange and div.white */  
      20.   
  
  
  
    20. }  
      21.

    logo 的效果圖如下

    邊框動(dòng)畫

    接下來, 我們將進(jìn)入棘手(有趣)的部分

    CSS 不允許我們直接對 div.logo 的邊框進(jìn)行設(shè)置達(dá)到我們想要的效果, 所以我們必須去除原有的邊框, 采用其他的辦法來實(shí)現(xiàn)

    我們要把四個(gè)邊框分割開來, 然后讓它們有序地出現(xiàn), 所以, 我們可以使用覆蓋整個(gè) div 的兩個(gè)透明的偽元素

    廢話少說, 就讓我們開始吧, 我們先做出它最初始的樣子. 我們讓 div.logo :: before 絕對位于 div.logo 的左上角，代表方塊的上邊框和右邊框

    , 讓 div.logo::after 絕對定位 div.logo 的右下角, 代表方塊的下邊框和左邊框

    現(xiàn)在, less 代碼變成了這樣

     
 
 
 
      
  
  
  
  
    1. .logo {  
      2.   
  
  
  
    2.   position: relative;  
      3.   
  
  
  
    3.   width: 100px;  
      4.   
  
  
  
    4.   height: 100px;  
      5.   
  
  
  
    5.   box-sizing: border-box; 
      6.   
  
  
  
    6.   background-color: white;    
      7.   
  
  
  
    7.   &::before,  
      8.   
  
  
  
    8.   &::after {  
      9.   
  
  
  
    9.     content: '';  
      10.   
  
  
  
    10.     position: absolute;  
      11.   
  
  
  
    11.     width: 100%;  
      12.   
  
  
  
    12.     height: 100%;  
      13.   
  
  
  
    13.     box-sizing: border-box;  
      14.   
  
  
  
    14.     border: 4px solid transparent;  
      15.   
  
  
  
    15.   }     
      16.   
  
  
  
    16.   &::before {  
      17.   
  
  
  
    17.     top: 0;  
      18.   
  
  
  
    18.     left: 0;  
      19.   
  
  
  
    19.     border-top-color: black;  
      20.   
  
  
  
    20.     border-right-color: black;  
      21.   
  
  
  
    21.   }    
      22.   
  
  
  
    22.   &::after {  
      23.   
  
  
  
    23.     bottom: 0;  
      24.   
  
  
  
    24.     right: 0;  
      25.   
  
  
  
    25.     border-bottom-color: red; // Red for demo purposes only  
      26.   
  
  
  
    26.     border-left-color: red;  
      27.   
  
  
  
    27.   }  
      28.   
  
  
  
    28. }  
      29.

    現(xiàn)在效果長這樣

    接下來, 我們就用 keyframe 做 div.logo::before 的***個(gè)動(dòng)畫

    我們將 width 和 height 初始都為 0, 然后用 keyframe 將 width 和

    height 調(diào)整到 100%

    隨著我們在相應(yīng)的時(shí)間把邊框從透明變?yōu)楹谏? 我們想要的最開始的效果就出來了

    該代碼展示了偽元素的初始動(dòng)畫

     
 
 
 
      
  
  
  
  
    1. div.logo {  
      2.   
  
  
  
    2.   &::before,  
      3.   
  
  
  
    3.   &::after {  
      4.   
  
  
  
    4.     /* ... */  
      5.   
  
  
  
    5.     animation-timing-function: linear;  
      6.   
  
  
  
    6.   }  
      7.   
  
  
  
    7.   &::before {  
      8.   
  
  
  
    8.     /* ... */  
      9.   
  
  
  
    9.     animation: border-before 1.5s infinite;  
      10.   
  
  
  
    10.     animation-direction: alternate;  
      11.   
  
  
  
    11.   } 
      12.   
  
  
  
    12. }  
      13.   
  
  
  
    13. @keyframes border-before {  
      14.   
  
  
  
    14.   0% {  
      15.   
  
  
  
    15.     width: 0;  
      16.   
  
  
  
    16.     height: 0;  
      17.   
  
  
  
    17.     border-right-color: transparent;  
      18.   
  
  
  
    18.   }  
      19.   
  
  
  
    19.   24.99% {  
      20.   
  
  
  
    20.     border-right-color: transparent;  
      21.   
  
  
  
    21.   }  
      22.   
  
  
  
    22.   25% {  
      23.   
  
  
  
    23.     height: 0;  
      24.   
  
  
  
    24.     width: 100%;  
      25.   
  
  
  
    25.     border-right-color: black;  
      26.   
  
  
  
    26.   }  
      27.   
  
  
  
    27.   50%,  
      28.   
  
  
  
    28.   100% {  
      29.   
  
  
  
    29.     width: 100%;  
      30.   
  
  
  
    30.     height: 100%;  
      31.   
  
  
  
    31.   }  
      32.   
  
  
  
    32. }  
      33.

    我們對 div.logo::after 重復(fù)相同的操作, 不要忘了調(diào)整時(shí)間和反轉(zhuǎn) width 和 height. 現(xiàn)在, 我們就有了最外層邊框的整個(gè)動(dòng)畫.

    方塊動(dòng)畫

    ***，我們一起來設(shè)置方塊的動(dòng)畫

    我們***的挑戰(zhàn)是無法連接 keyframes。因?yàn)?，我們最終想要的動(dòng)畫中每個(gè)小方框都有一定的順序， 為此， 我們作如下改變

    • 0 to 25%：上邊框和右邊框顯現(xiàn)
    • 25 to 50%：下邊框和左邊框顯現(xiàn)
    • 50 to 65%：紅色小方塊顯現(xiàn)
    • 65 to 80%：橙色小方塊顯現(xiàn)
    • 75 to 90%：白色小方塊顯現(xiàn)

    紅色小方框 keyframe 如下

     
 
 
 
      
  
  
  
  
    1. @keyframes red {  
      2.   
  
  
  
    2.   0%,  
      3.   
  
  
  
    3.   50% {  
      4.   
  
  
  
    4.     width: 0;  
      5.   
  
  
  
    5.     opacity: 0;  
      6.   
  
  
  
    6.   }  
      7.   
  
  
  
    7.   50.01% {  
      8.   
  
  
  
    8.     opacity: 1;  
      9.   
  
  
  
    9.   }  
      10.   
  
  
  
    10.   65%,  
      11.   
  
  
  
    11.   100% {  
      12.   
  
  
  
    12.     width: 27%;  
      13.   
  
  
  
    13.     opacity: 1;  
      14.   
  
  
  
    14.   }  
      15.   
  
  
  
    15. }  
      16.

    重復(fù)上面的代碼，就可完成我們整個(gè)動(dòng)畫， 是不是很***

    總結(jié)

    感謝你的閱讀，***附上 所有的源碼(http://t.cn/R93jmwe)，但個(gè)人建議，不要直接閱讀源碼，根據(jù)上面的提示在 codepen 中自己來一遍才是***實(shí)踐


    網(wǎng)站欄目：如何只用CSS完成漂亮的加載
    文章轉(zhuǎn)載：http://www.dlmjj.cn/article/djipsop.html