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

小花貓Jane發表於2017-12-25
CSS

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

為什麼要做載入

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

我是如何做的

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

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

·

CSS 中的 :after 和 :before

· keyframe 動畫直通車

開始入門

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

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

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

·

邊框一個接一個地
出現

·

紅
/橙/白色方塊向裡
滑入

·

方塊向外
劃出

·

邊框
消失

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

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

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!doctype html>

<html>

<head>

<!-- <link rel="preload"> for CSS, JS, and font files -->

<style type="text/css">

/*

* All the CSS for the loader

* Minified and vendor prefixed

*/

</style>

</head>

<body>

<div class="loader">

<!-- HTML for the loader -->

</div>

<header />

<main />

<footer />

<!-- Tags for CSS and JS files -->

</body>

</html>

構建 logo 本身

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

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

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

JavaScript

1

2

3

4

5

<div class="logo">

<div class="white"></div>

<div class="orange"></div>

<div class="red"></div>

</div>

我們用
less 來實現

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.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 */

}

logo 的效果圖如下

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

邊框動畫

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

CSS 不允許我們直接對 div.logo 的邊框進行設定達到我們想要的效果, 所以我們必須

去除
原有的邊框
, 採用其他的辦法來實現

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

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

現在
, less 程式碼變成了這樣

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

.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;

}

}

現在
效果
長這樣

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

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

我們將
width 和 height 初始都為 0, 然後用 keyframe 將 width 和
height 調整到 100%

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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 如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@keyframes red {

0%,

50% {

width: 0;

opacity: 0;

}

50.01% {

opacity: 1;

}

65%,

100% {

width: 27%;

opacity: 1;

}

}

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

想要學習前端開發的同學，可以加群：
543627393
學習哦！


相關文章