ag88环亚国际娱乐平台 的效果图如下

为什么要做加载

只想说, 本文最重要的是对 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







构建 logo 本身

bVSJ0f

一开始我们先实现 logo 本身, 而不是最终版本的效果

父级元素 logo, 不同颜色的方块都是它的子元素

JavaScript

1
2
3
4
5

我们用 less 来实现

JavaScript

.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 */
}
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;
} ag88环亚国际娱乐平台
/* Similar code for div.orange and div.white */
}
ag88环亚国际娱乐平台 的效果图如下

bVSJ0q

边框动画

接下来, 我们将进入棘手(有趣)的部分

CSS 不允许我们直接对 div.logo 的边框进行设置达到我们想要的效果, 所以我们必须去除原有的边框, 采用其他的办法来实现
ag88环亚国际娱乐平台
我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素

废话少说, 就让我们开始吧, 我们先做出它最初始的样子. 我们让 div.logo :: before 绝对位于 div.logo 的左上角,代表方块的上边框和右边框
, 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框

现在, less 代码变成了这样

JavaScript

.logo {
position: relative;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: white;

&::before,
&::after {
content: ”;
position: absolute; ag88环亚国际娱乐平台
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;
}
}
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 ag88环亚国际娱乐平台
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;
}
}
现在效果长这样

bVSJ0p

接下来, 我们就用 keyframe 做 div.logo::before 的第一个动画

我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和
height 调整到 100%

随着我们在相应的时间把边框从透明变为黑色, 我们想要的最开始的效果就出来了

该代码展示了伪元素的初始动画

发表评论

电子邮件地址不会被公开。 必填项已用*标注