怎么CSS實(shí)現(xiàn)加載功能

發(fā)布時(shí)間：2021-08-10 17:23:26 來源：億速云閱讀：167 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“怎么CSS實(shí)現(xiàn)加載功能”，在日常操作中，相信很多人在怎么CSS實(shí)現(xiàn)加載功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么CSS實(shí)現(xiàn)加載功能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

為什么要做加載

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

我是如何做的

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

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

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

開始入門

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

怎么CSS實(shí)現(xiàn)加載功能

正如你所看到的, 我們將經(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)

<!doctype html>  <html>    <head>      <!-- <link rel="preload"> for CSS, JS, and font files  -->      <style type="text/css">        /*         *  All the CSS for the loader         *  Minified and vendor prefixed         */      </style>    </head>    <body>      <div class="loader">        <!-- HTML for the loader -->      </div>      <header />      <main />      <footer />      <!-- Tags for CSS and JS files -->    </body>  </html>

構(gòu)建 logo 本身

怎么CSS實(shí)現(xiàn)加載功能

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

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

<div class="logo">    <div class="white"></div>    <div class="orange"></div>    <div class="red"></div>  </div>

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

.logo {    position: relative;    width: 100px;    height: 100px;    border: 4px solid black;    box-sizing: border-box;    background-color: white;     & > div {      position: absolute;    }       .red {      top: 0;      bottom: 0;      left: 0;      width: 27%;      border-right: 4px solid black;      background-color: #EA5664;    }   /* Similar code for div.orange and div.white */  }

logo 的效果圖如下

怎么CSS實(shí)現(xiàn)加載功能

邊框動(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 代碼變成了這樣

.logo {    position: relative;    width: 100px;    height: 100px;    box-sizing: border-box;   background-color: white;      &::before,    &::after {      content: '';      position: absolute;      width: 100%;      height: 100%;      box-sizing: border-box;      border: 4px solid transparent;    }       &::before {      top: 0;      left: 0;      border-top-color: black;      border-right-color: black;    }      &::after {      bottom: 0;      right: 0;      border-bottom-color: red; // Red for demo purposes only      border-left-color: red;    }  }

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

怎么CSS實(shí)現(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)畫

div.logo {    &::before,    &::after {      /* ... */      animation-timing-function: linear;    }    &::before {      /* ... */      animation: border-before 1.5s infinite;      animation-direction: alternate;    } }  @keyframes border-before {    0% {      width: 0;      height: 0;      border-right-color: transparent;    }    24.99% {      border-right-color: transparent;    }    25% {      height: 0;      width: 100%;      border-right-color: black;    }    50%,    100% {      width: 100%;      height: 100%;    }  }

我們對 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 如下

@keyframes red {    0%,    50% {      width: 0;      opacity: 0;    }    50.01% {      opacity: 1;    }    65%,    100% {      width: 27%;      opacity: 1;    }  }

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

到此，關(guān)于“怎么CSS實(shí)現(xiàn)加載功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

怎么CSS實(shí)現(xiàn)加載功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽