如何只用CSS 完成漂亮的加载

小花猫Jane
226 阅读5分钟

如何只用
CSS 完成漂亮的加载

为什么要做加载

只想说
, 本文最重要的是对 CSS,
伪元素
, keyframe
的分享
, 以及读者对这些东西的
真正掌握
, 我并
不是怂恿
大家在每一个页面的前面都去加一个酷炫的加载

我是如何做的

不同的页面
, 对加载的
设计
也就可能不同
. 本文设计的加载适合大多数页面.

并且
, 本文假设读者已经非常熟悉
伪元素
, CSS 动画属性
和
keyframe, 如果读者想重温, 下面两篇文章可做参考

·

CSS 中的 :after 和 :before

· keyframe 动画直通车

开始入门

在开始一起构建它前
, 我们先看看它
最后的效果

正如你所看到的
, 我们将经历 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 本身

一开始我们先实现
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 不允许我们直接对 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;

}

}

现在
效果
长这样

接下来
, 我们就用 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
学习哦！


avatar
文章
阅读
粉丝