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

為什麼要做載入

我是如何做的

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

開始入門

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

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

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

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

-- html for the loader -->

-- tags for css and js files -->

構建 logo 本身

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

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

"white">

"orange">

"red">

我們用 less 來實現

.red  

/* similar code for div.orange and div.white */  

}   logo 的效果圖如下

邊框動畫

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

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

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

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

, 讓 div.logo::after 絕對定位 div.logo 的右下角, 代表方塊的下邊框和左邊框

現在, less **變成了這樣

&::before     

&::after   

}   現在效果長這樣

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

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

height 調整到 100%

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

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

&::before  

}  @keyframes border-before   

24.99%   

25%   

50%,  

100%   

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

方塊動畫

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

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

紅色小方框 keyframe 如下

50.01%   

65%,  

100%   

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

總結

如何只用CSS做到完全居中

我們都知道 margin 0 auto 的樣式能讓元素水平居中，而 margin auto 卻不能做到垂直居中 直到現在。transform法 和 完全居中 法的好處一樣，簡單有效，同時支援可變高度。為內容指定帶有廠商字首的transform translate 50 50 和top 50 left...

如何判斷HTML頁面載入完成

dom構建完成，不包含 樣式和其它框架，也就是我們常說的domcontentloaded事件。頁面依賴的所有資源記載完成，也就是我們常說的window.onload事件。監聽document的onreadystatechange,判斷readystatedocument.onreadystatech...

如何判斷頁面是否載入完成？

方式一 window.onload window.onload function 方式二 document ready document ready function 注意 頁面載入完成有兩種事件，一是ready，表示文件結構已經載入完成 不包含等非文字 檔案 二是onload，指示頁 面包含等檔案...