為什麼要做加載
只想說, 本文最重要的是對 CSS, 偽元素, keyframe 的分享, 以及讀者對這些東西的真正掌握, 我並不是慫恿大家在每一個頁面的前面都去加一個酷炫的加載。
如何做
不同的頁面, 對加載的設計也就可能不同，本文設計的加載適合大多數頁面。
並且, 本文假設讀者已經非常熟悉偽元素, CSS 動畫屬性和 keyframe 。
開始入門
在開始一起構建它前, 我們先看看它最後的效果
正如你所看到的, 我們將經歷 4 個步驟
邊框一個接一個地出現
紅/橙/白色方塊向裡滑入
方塊向外劃出
邊框消失
我們只需要 animation-direction: alternate 來完成步驟 1 和 2, 步驟 3 和 步驟 4 我們可以使用 reverse, 另外, 我們可以使用 animation-iteration-count: infinite重複動畫
1.首先, 我們先書寫好基本的 HTML 結構
代碼如下
2.構建 logo 本身
一開始我們先實現 logo 本身, 而不是最終版本的效果。
父級元素 logo, 不同顏色的方塊都是它的子元素
代碼如下
我們用 less 來實現
代碼如下
.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 */
}
效果圖如下
邊框動畫
接下來, 我們將進入棘手(有趣)的部分
CSS 不允許我們直接對 div.logo 的邊框進行設置達到我們想要的效果, 所以我們必須去除原有的邊框, 採用其他的辦法來實現。
我們要把四個邊框分割開來, 然後讓它們有序地出現, 所以, 我們可以使用覆蓋整個 div 的兩個透明的偽元素。
我們先做出它最初始的樣子，我們讓 div.logo :: before 絕對位於 div.logo 的左上角，代表方塊的上邊框和右邊框, 讓 div.logo::after 絕對定位 div.logo 的右下角, 代表方塊的下邊框和左邊框。
現在, 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;
}
}
現在效果長這樣
接下來, 我們就用 keyframe 做 div.logo::before 的第一個動畫。
我們將 width 和 height 初始都為 0, 然後用 keyframe 將 width 和 height 調整到 100%
隨著我們在相應的時間把邊框從透明變為黑色, 我們想要的最開始的效果就出來了。
該代碼展示了偽元素的初始動畫
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 重複相同的操作, 不要忘了調整時間和反轉 width 和 height. 現在, 我們就有了最外層邊框的整個動畫。
方塊動畫
最後，我們一起來設置方塊的動畫
我們最大的挑戰是無法連接 keyframes。因為，我們最終想要的動畫中每個小方框都有一定的順序， 為此， 我們作如下改變。
0 to 25%：上邊框和右邊框顯現
25 to 50%：下邊框和左邊框顯現
50 to 65%：紅色小方塊顯現
65 to 80%：橙色小方塊顯現
75 to 90%：白色小方塊顯現
紅色小方框 keyframe 如下
@keyframes red {
0%,
50% {
width: 0;
opacity: 0;
}
50.01% {
opacity: 1;
}
65%,
100% {
width: 27%;
opacity: 1;
}
}
重複上面的代碼，就可完成我們整個動畫， 是不是很完美~
閱讀更多 WEB前端交流 的文章
