如何用css快速创建3点加载动画

一、前言

当网站需要加载一些大量的数据或者比较重的样式时,在用户等待的过程中,一些动画就显得尤为弥足珍贵,但是在设计这些动画的时候,我们往往会因为种种原因,而导致耗费大量的时间在开发上。今天我们将介绍一种最简单的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开发中使用它来让用户更好的体验我们的网页加载过程,相比其他一些比较酷炫的动画,更加稳定高效。通过以上代码实现,您可以轻松地创建出一个比较良好的三点加载动画,如果您对该动画还有更好的建议,可以使用该方法进行自定义。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。