CSS如何实现一个简单的Loading效果
导读：这篇文章主要介绍了CSS如何实现一个简单的Loading效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS如何实现一个简单的Loading效果文章都会有所收获，下面我们一起来看看吧。...
这篇文章主要介绍了CSS如何实现一个简单的Loading效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS如何实现一个简单的Loading效果文章都会有所收获，下面我们一起来看看吧。
1.使用Animation动画实现Loading
Animation是CSS3新增的一个模块，它可以用来创建非常复杂的动画效果。这里我们通过Animation来创建一个Loading的效果。
首先在HTML中添加一个用于Loading效果的容器：
divclass="loading">
divclass="loading-circle">
/div>
divclass="loading-circle">
/div>
divclass="loading-circle">
/div>
/div>
接下来，在CSS中定义一个关键帧动画，用于旋转“圆圈”。
@keyframesrotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
然后为.loading-circle类设置样式，使其成为一个圆形，并在其中使用上述定义的动画。
.loading-circle{
width:20px;
height:20px;
border-radius:50%;
background-color:#333;
margin:010px;
animation:rotate1.5sease-in-outinfinite;
}
最后，在.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);
}
完整的实现代码如下：
@keyframesrotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.loading-circle{
width:20px;
height:20px;
border-radius:50%;
background-color:#333;
margin:010px;
animation:rotate1.5sease-in-outinfinite;
}
.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的展示区域：
divclass="loading-2">
divclass="loading-circle-2">
/div>
divclass="loading-circle-2">
/div>
divclass="loading-circle-2">
/div>
/div>
在CSS中，我们为.loading-circle-2类定义了初始状态和最终状态，并使用Transition来实现状态之间的平滑过渡。
.loading-circle-2{
width:20px;
height:20px;
border-radius:50%;
background-color:#333;
margin:010px;
transform:scale(0);
transition:transform0.5sease0.2s;
}
.loading-2.loading-circle-2:nth-child(1){
animation:delay0.2slinearinfinite;
}
.loading-2.loading-circle-2:nth-child(2){
animation:delay0.3slinearinfinite;
}
.loading-2.loading-circle-2:nth-child(3){
animation:delay0.4slinearinfinite;
}
@keyframesdelay{
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:010px;
transform:scale(0);
transition:transform0.5sease0.2s;
}
.loading-2.loading-circle-2:nth-child(1){
animation:delay0.2slinearinfinite;
}
.loading-2.loading-circle-2:nth-child(2){
animation:delay0.3slinearinfinite;
}
.loading-2.loading-circle-2:nth-child(3){
animation:delay0.4slinearinfinite;
}
@keyframesdelay{
0%,80%,100%{
transform:scale(0);
}
40%{
transform:scale(1);
}
}
.loading-2{
display:flex;
justify-content:center;
align-items:center;
}
关于“CSS如何实现一个简单的Loading效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS如何实现一个简单的Loading效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS如何实现一个简单的Loading效果
本文地址： https://pptw.com/jishu/294836.html