純 CSS 擼一個(gè)漂亮的加載
我要評論
為什么要做加載
只想說, 本文最重要的是對 CSS, 偽元素, keyframe的分享, 以及讀者對這些東西的真正掌握, 我并不是慫恿大家在每一個(gè)頁面的前面都去加一個(gè)酷炫的加載
我是如何做的
不同的頁面, 對加載的設(shè)計(jì)也就可能不同. 本文設(shè)計(jì)的加載適合大多數(shù)頁面.
并且, 本文假設(shè)讀者已經(jīng)非常熟悉偽元素, CSS 動(dòng)畫屬性和keyframe, 如果讀者想重溫, 下面兩篇文章可做參考
學(xué)會使用 CSS 中的 :after 和 :before
開始入門
在開始一起構(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)
<!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 本身
一開始我們先實(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 的效果圖如下
邊框動(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)在效果長這樣
接下來, 我們就用 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)畫， 是不是很完美
總結(jié)
感謝你的閱讀，最后附上 所有的源碼（http://t.cn/R93jmwe），但個(gè)人建議，不要直接閱讀源碼，根據(jù)上面的提示在 codepen 中自己來一遍才是最佳實(shí)踐
相關(guān)文章
純css3實(shí)現(xiàn)圓點(diǎn)加載動(dòng)畫特效源碼
css3 loading圓點(diǎn)加載動(dòng)畫、簡潔的5個(gè)圓點(diǎn)排列加載特效。有需要的朋友可以直接下載使用2018-06-25
css3 animation實(shí)現(xiàn)游動(dòng)圖標(biāo)網(wǎng)頁加載loading動(dòng)畫特效
css3屬性制作圖標(biāo)加載動(dòng)畫?；赼nimation、transform簡單的loading網(wǎng)頁加載圖標(biāo)動(dòng)畫特效。有需要的朋友可以直接下載使用2018-06-14
