弹跳加载动画特效Bouncing loader

Posted lcspring

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹跳加载动画特效Bouncing loader相关的知识,希望对你有一定的参考价值。

一款非常常用的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: flexjustify-content: center将它们中的中心位置。

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

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

  5. animation是对于各种动画属性的缩写属性:animation-nameanimation-durationanimation-iteration-countanimation-direction被使用。

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

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

原文链接:

 

以上是关于弹跳加载动画特效Bouncing loader的主要内容,如果未能解决你的问题,请参考以下文章

修复 WP 弹跳 IBM MobileFirst 6.3

Unity3D:弹跳/反射光线投射

如何构建自定义 jQuery 缓动/弹跳动画?

iOS Safari Overscrolling:下拉与弹跳

C# WPF制作窗体特效问题

引导按钮和加载动画