弹跳加载动画特效Bouncing loader

Posted 2021-02-16 lcspring

一款非常常用的css 加载动画，这款CSS3 Loading动画主要由几个小球通过规律的上下跳动，渐隐渐显而成，效果十分生动、流畅。兼容IE8以上，尤其适合在移动端中使用，基本代替了图片实现加载的效果。

HTML

1 <div class="bouncing-loader">
2   <div></div>
3   <div></div>
4   <div></div>
5 </div>

CSS

 1 @keyframes bouncing-loader {
 2   to {
 3     opacity: 0.1;
 4     transform: translate3d(0, -1rem, 0);
 5   }
 6 }
 7 .bouncing-loader {
 8   display: flex;
 9   justify-content: center;
10 }
11 .bouncing-loader > div {
12   width: 1rem;
13   height: 1rem;
14   margin: 3rem 0.2rem;
15   background: #8385aa;
16   border-radius: 50%;
17   animation: bouncing-loader 0.6s infinite alternate;
18 }
19 .bouncing-loader > div:nth-child(2) {
20   animation-delay: 0.2s;
21 }
22 .bouncing-loader > div:nth-child(3) {
23   animation-delay: 0.4s;
24 }

demo显示

说明

注意：1rem通常是16px。

1. @keyframes定义具有两种状态的动画，其中元素更改opacity并使用transform: translateY()在2D平面上向上转换transform: translate3d()。使用单轴平移transform: translate3d()可以提高动画的性能。

2. .bouncing-loader是弹跳圆圈和用途的父容器display: flex和justify-content: center将它们中的中心位置。

3. .bouncing-loader > div，将父级的三个子元素们div作为样式。子元素们div给定的宽度和高度为1rem，用border-radius: 50%;将它们从正方形变成圆形。

4. margin: 3rem 0.2rem指定每个圆形具有上/下外边距是3rem和左/右外边距是0.2rem，以便它们不会直接相互接触，使子元素们保持一定的空间。

5. animation是对于各种动画属性的缩写属性：animation-name，animation-duration，animation-iteration-count，animation-direction被使用。

6. nth-child(n) 将元素作为其父元素的第n个子元素。

7. animation-delaydiv分别用于第二个和第三个div，因此每个元素不会同时启动动画。

原文链接: