如何只用 CSS 完成漂亮的載入

01-30

為什麼要做載入

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

我是如何做的

不同的頁面, 對載入的設計也就可能不同. 本文設計的載入適合大多數頁面.

並且, 本文假設讀者已經非常熟悉偽元素, CSS 動畫屬性和 keyframe, 如果讀者想重溫, 下面兩篇文章可做參考

學會使用 CSS 中的 :after 和 :before
keyframe 動畫直通車

開始入門

想要實現最後的效果，我們將經歷 4 個步驟

邊框一個接一個地出現
紅/橙/白色方塊向里滑入
方塊向外划出
邊框消失

我們只需要 animation-direction: alternate 來完成步驟 1 和 2, 步驟 3 和步驟 4 我們可以使用 reverse, 另外, 我們可以使用 animation-iteration-count: infinite 重複動畫

首先, 我們先書寫好基本的 HTML 結構

<!doctype html>n<html>n <head>n n <style type="text/css">n /*n * All the CSS for the loadern * Minified and vendor prefixedn */n </style>n </head>n <body>n <div class="loader">n n </div>n <header />n <main />n <footer />n n </body>n</html>n

構建 logo 本身

一開始我們先實現 logo 本身, 而不是最終版本的效果

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

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

我們用 less 來實現

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

logo 的效果圖如下

邊框動畫

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

CSS 不允許我們直接對 div.logo 的邊框進行設置達到我們想要的效果, 所以我們必須去除原有的邊框, 採用其他的辦法來實現

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

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

現在, less 代碼變成了這樣

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

現在效果長這樣

接下來, 我們就用 keyframe 做 div.logo::before 的第一個動畫

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

height 調整到 100%

隨著我們在相應的時間把邊框從透明變為黑色, 我們想要的最開始的效果就出來了

該代碼展示了偽元素的初始動畫

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

我們對 div.logo::after 重複相同的操作, 不要忘了調整時間和反轉 width 和 height. 現在, 我們就有了最外層邊框的整個動畫.

方塊動畫

最後，我們一起來設置方塊的動畫

我們最大的挑戰是無法連接 keyframes。因為，我們最終想要的動畫中每個小方框都有一定的順序，為此，我們作如下改變

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

紅色小方框 keyframe 如下

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

重複上面的代碼，就可完成我們整個動畫，是不是很完美

感謝你的閱讀，最後附上所有的源碼，但個人建議，不要直接閱讀源碼，根據上面的提示自己在 codepen 中來一遍才是最佳實踐

原文鏈接: How to create a beautiful animated loader with nothing but CSS