CSS3的loading制作，让页面加载时不再单调

Posted 2021-04-09 码匠与HTML5学堂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3的loading制作，让页面加载时不再单调相关的知识，希望对你有一定的参考价值。

页面的loading效果一直都是个比较重要的制作，往往一个好的加载效果可以有效的提升用户体验。而实际开发中，loading效果具体该如何制作？前端工程师又会有哪些特殊的技能呢？

本文主要内容

1、效果展示

2、主要涉及到的知识点

3、基本实现思路

4、案例实现

5、总结

1、效果展示

CSS3效果的制作不在于那些语句、命令，而是在于如何把语句组合到一起来实现实际效果。换句话说，CSS3效果只有想不到的，但是没有做不到的。下图就是一个开发中常用到的loading效果展示。

CSS3的loading制作，让页面加载时不再单调

2、主要涉及到的知识点

此效果的实现并不是很难，只需要借助之前CSS3文章系列中讲解过的圆角、变形、动画，在配合上相应的位置定位即可实现，具体我们来分析下需要用到的知识点。

1）CSS3圆角

主要功能是为标签添加圆角样式，有如下的属性：

border-radius ： none | percent；

none代表的是不设置圆角，percent表示可以使用百分数实现圆角的设置，如下：

border-radius: 50%;

2）CSS3变形

CSS3的变形主要是transform提供的几种方式，包含旋转、平移、扭曲、缩放等等。在本例中主要使用到的是旋转，用于实现圆环的变化效果。

其主要使用方式如下：

transform: rotate(30deg);

通过指定的角度参数对元素指定一个旋转，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

3）CSS3动画

借助CSS3的animation来实现圆环的转动效果，配合关键帧keyframe，让圆环在不同的旋转时期发生不一样的变化。其主要使用方式如下：

animation: fadeOut 1s linear 0.2s infinite;

上述代码中，属性从左往右依次代表的是：动画的名称（由keyframe定义）、动画的时间、动画的速度曲线、动画的延迟时间、动画的播放次数（infinite表示无限循环）。

3、基本实现思路

利用两个div来实现左右各半的位置大小制作，然后借助圆角边框实现圆环样式的控制，让原来是方形的块变成圆形；之后控制不同方向上的边框颜色，调整最佳的视觉效果；最后利用CSS3的动画，实现圆环的转动，以及颜色的变化效果。

4、案例实现

基本的html结构如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
</style>
</head>
<body>
<div class="progress">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
<div class="loading">
loading
<em>.</em>
<em>.</em>
<em>.</em>
</div>
</div>
</body>
</html>

相应的样式书写如下：

.progress {
position: relative;
width: 200px;
height: 200px;
margin: 150px auto;
line-height: 200px;
text-align: center;
font-size: 25px;
}
.wrapper {
position: absolute;
top: 0;
overflow: hidden;
width: 100px;
height: 200px;
}
.right {
right: 0;
}
.left {
left: 0;
}
.circleProgress {
position: absolute;
top: 0;
width: 160px;
height: 160px;
border: 20px solid rgb(232, 232, 12);
border-radius: 50%;
transform: rotate(45deg);
}
.rightcircle {
right: 0;
border-top: 20px solid green;
border-right: 20px solid green;
animation: right 5s linear infinite;
}
.leftcircle {
left: 0;
border-bottom: 20px solid green;
border-left: 20px solid green;
animation: left 5s linear infinite;
}
@keyframes right {
0% {
border-top: 20px solid #ed1a1a;
border-right: 20px solid #ed1a1a;
-webkit-transform: rotate(45deg);
}
50% {
border-top: 20px solid rgb(232, 232, 12);
border-right: 20px solid rgb(232, 232, 12);
border-left: 20px solid rgb(81, 197, 81);
border-bottom: 20px solid rgb(81, 197, 81);
transform: rotate(225deg);
}
100% {
border-left: 20px solid green;
transform: rotate(225deg);
}
}
@keyframes left {
0% {
border-bottom: 20px solid #ed1a1a;
border-left: 20px solid #ed1a1a;
transform: rotate(45deg);
}
50% {
border-top: 20px solid rgb(81, 197, 81);
border-right: 20px solid rgb(81, 197, 81);
border-bottom: 20px solid rgb(232, 232, 12);
border-left: 20px solid rgb(232, 232, 12);
transform: rotate(45deg);
}
100% {
border-top: 20px solid green;
border-right: 20px solid green;
border-bottom: 20px solid green;
border-left: 20px solid green;
transform: rotate(225deg);
}
}
.loading em:nth-child(1) {
animation: fadeOut 1s linear 0.2s infinite;
}
.loading em:nth-child(2) {
animation: fadeOut 1s linear 0.6s infinite;
}
.loading em:nth-child(3) {
animation: fadeOut 1s linear 1s infinite;
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

如上，CSS3效果就已经搞定了~很简单的解决了loading的效果，同时适合在移动端中应用。

显示的效果：

5、总结

此效果采用的是两个div各占父级一半大小的布局方式，然后借助定位实现两个半圆的完美拼接，最后针对边框的不同方向，给予不同的颜色变化，配合上动画的效果，实现最终的圆环转动与相应的颜色变换。