这篇文章主要介绍了CSS如何实现一个简单的Loading效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS如何实现一个简单的Loading效果文章都会有所收获，下面我们一起来看看吧。
1.使用Animation动画实现Loading
Animation是CSS3新增的一个模块，它可以用来创建非常复杂的动画效果。这里我们通过Animation来创建一个Loading的效果。
首先在HTML中添加一个用于Loading效果的容器：
<div class="loading"> <div class="loading-circle"></div> <div class="loading-circle"></div> <div class="loading-circle"></div> </div>
接下来，在CSS中定义一个关键帧动画，用于旋转“圆圈”。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}然后为.loading-circle类设置样式，使其成为一个圆形，并在其中使用上述定义的动画。
.loading-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin: 0 10px;
animation: rotate 1.5s ease-in-out infinite;
}最后，在.css-loading中设置容器的样式，使其居中于页面，并适当调整“圆圈”的位置和大小。
.loading {
display: flex;
justify-content: center;
align-items: center;
}
.loading-circle:nth-child(1) {
transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
transform: translateY(30px);
}完整的实现代码如下：
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin: 0 10px;
animation: rotate 1.5s ease-in-out infinite;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
}
.loading-circle:nth-child(1) {
transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
transform: translateY(30px);
}2.使用Transition过渡实现Loading
除了Animation之外，我们还可以使用CSS中的Transition来实现Loading效果。
我们同样在HTML中添加一个容器作为Loading的展示区域：
<div class="loading-2"> <div class="loading-circle-2"></div> <div class="loading-circle-2"></div> <div class="loading-circle-2"></div> </div>
在CSS中，我们为.loading-circle-2类定义了初始状态和最终状态，并使用Transition来实现状态之间的平滑过渡。
.loading-circle-2 {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin: 0 10px;
transform: scale(0);
transition: transform 0.5s ease 0.2s;
}
.loading-2 .loading-circle-2:nth-child(1) {
animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
animation: delay 0.4s linear infinite;
}
@keyframes delay {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}最后，我们在.loading-2元素上设置样式，使其居中于页面。
完整的实现代码如下：
.loading-circle-2 {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin: 0 10px;
transform: scale(0);
transition: transform 0.5s ease 0.2s;
}
.loading-2 .loading-circle-2:nth-child(1) {
animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
animation: delay 0.4s linear infinite;
}
@keyframes delay {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.loading-2 {
display: flex;
justify-content: center;
align-items: center;
}