為什么要做加載

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

我是如何做的

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

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

學會使用 CSS 中的 :after 和 :before
 

keyframe 動畫直通車

開始入門

在開始一起構建它前, 我們先看看它最后的效果

正如你所看到的, 我們將經歷 4 個步驟