一、前言
当网站需要加载一些大量的数据或者比较重的样式时,在用户等待的过程中,一些动画就显得尤为弥足珍贵,但是在设计这些动画的时候,我们往往会因为种种原因,而导致耗费大量的时间在开发上。今天我们将介绍一种最简单的css3动画创建方法,只需要几行代码,即可轻松地完成一些基本的加载动画设计。
二、三点加载动画的简介
三点加载动画相信大家都不会陌生,它是我们在加载网页时经常看到的一种动画效果,也是一种比较流行的加载动画效果。它基于三个点的运动轨迹来实现,中间的点处于固定的位置,而左右两侧的点则可以沿着弧线做出动态的运动效果,从而呈现出一种很酷炫的效果。
三、代码实现
我们使用一个div来包括三个子div,然后通过切换子div的class值来实现动画效果。首先,我们来给出最基本的css代码如下:
.loader {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
position: relative;
width: 60px;
height: 20px;
}
.loader div {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
animation: loader 1s infinite ease-in-out;
}
.loader div:nth-child(1) {
left: 0;
animation-delay: -0.32s;
}
.loader div:nth-child(2) {
left: 20px;
animation-delay: -0.16s;
}
.loader div:nth-child(3) {
left: 40px;
animation-delay: 0s;
}
@keyframes loader {
0% {
transform: scale(0.5);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 0.7;
}
}
1. 外容器.loader样式
该样式用来控制包含三点加载动画的外容器,让其居中显示,并设置一些基本的宽高和边距。其中,display: flex;用来设置弹性布局,justify-content: center;和align-items: center;则用来控制子元素在容器中的居中显示。
2. 内容器.div样式
该样式用来控制三个子div,它们具有相同的宽度和高度,使用圆角的边框使其呈现出圆形的形状。我们使用了position: absolute;将子div相对于父容器进行定位,通过animation属性来控制子div的动画效果。
3. @keyframes loader动画样式
该样式用来定义动画的细节,将三个子div依次进行变换,形成动画效果。在这里,我们使用了transform属性和opacity属性来控制子div的缩放比例和透明度,通过animation-delay属性来控制子div的反复变换的时间间隔。
四、总结
三点加载动画作为比较简单好用的加载动画,我们可以在web开发中使用它来让用户更好的体验我们的网页加载过程,相比其他一些比较酷炫的动画,更加稳定高效。通过以上代码实现,您可以轻松地创建出一个比较良好的三点加载动画,如果您对该动画还有更好的建议,可以使用该方法进行自定义。