今天自己實現了這個功能，記錄一下
效果：進入網頁時先出現載入動畫，載入完畢後顯示網頁
實現原理：
在html上方放乙個div，用來顯示載入動畫，js判斷載入完畢事件，將div隱藏即可。
知識點整理：
偽元素實現垂直居中、awesome字型動畫、js判斷html載入是否完成
**：css:
body
.loading-div
.loading-div::before
class
="loading-div"
>
class
="fa fa-spinner fa-pulse fa-3x fa-fw "
>
i>
class
="sr-only"
>
loading...span
>
div>
class
="main"
>
這裡是網頁內容
div>
js://注釋部分是設定2秒的定時延遲，timeout結束後載入網頁
//settimeout(() => , 2000);
//這是根據js判斷，頁面載入完畢就顯示
document.
onreadystatechange
=function()
}
HTML 簡單實現網頁載入動畫
效果 進入網頁時先出現載入動畫，載入完畢後顯示網頁 實現原理 在html上方放乙個div，用來顯示載入動畫，js判斷載入完畢事件，將div隱藏即可。知識點整理 偽元素實現垂直居中 awesome字型動畫 js判斷html載入是否完成 css body loading div loading div ...
HTML載入動畫實現
在頁面載入完成之前或者執行某操作時，先顯示要顯示的載入動畫。先定義乙個載入動畫元素 最好是純css實現，的話可能慢一點 當頁面未載入完成之前，先使其 可見 當頁面載入完成後，再使其 不可見 重要的一點就是怎樣知道頁面或者元素載入完成了，詳情可以看一下 載入動畫頁面來自 codepen 載入動畫頁面h...
豆瓣載入動畫實現
分解步驟，計算一下總共需要的角度 1 乙個笑臉，x軸下方的圓弧旋轉135 覆蓋2個點，此過程中圓弧增加45 2 畫布旋轉135 此過程中圓弧增加45 3 畫布旋轉360 此過程中圓弧減少360 5度 4 畫布旋轉90 此過程中圓弧減少90 5度 5 畫布旋轉135 釋放覆蓋的2個點 package ...