整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
oading动画在页面过度等经常会用到，我在工作中就写过很多有趣的loading加载动画，在这里，我就分享一个波浪效果的loading动画写法（在写动画前，可以先画个草稿或动画流程图，充分思考动画执行的过程，再编写代码事半功倍哦）。
css3编写的loading动画
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
1、让loading居中显示，同时让它变成flex容器，这样span就能设置宽高。
.loading{display: flex; width: 100px; height: 50px; position: absolute; top:50%; left: 50%; transform: translate(-50px,-25px);}
2、分析下这10个span的动画过程：我们把动画从开始到结束分成100份，0%的时候高度几乎没有，位置靠左，高度由小变大，大概15%的时候，突然变很高，颜色很深，并且右移很多，然后依次变矮，变浅，左移，以此类推。通过这个分析，我们写起来就有方向了。
2、根据动画效果和刚才的分析，10个span平分loading的宽度，高度我们就写和loading一样的高度，然后利用scaleY将它缩小，初始深点的背景色，在动画结束时，我们将颜色设置的很浅（颜色过渡建议同色系深浅变化或者相邻色系变化，比较自然好看，不建议颜色过渡特别大）。同时设置translateX也向左平移10像素（数值可以自己调整）。设置animation的动画时间为1.5秒，动画播放次数为无限次，动画效果为先慢后快再慢。重点：10个span的动画是以此执行，这里我们利用css3的var变量（文章末尾我们再来简单了解下这个css3 var以及css3计算calc）来动态编写动画延时：
.loading span {
width: 10px;
height: 50px;
background-color: #308dec;
transform: scaleY(0.01) translateX(-10px);
animation: load-ani 1.5s infinite ease-in-out;
animation-delay: calc(var(--n) * 0.05s);
}
3、分别设置十个span的延时时间（后面分析var的时候再来讨论为什么这么写）
.loading span:nth-child(1) { --n: 1; }
.loading span:nth-child(2) { --n: 2; }
.loading span:nth-child(3) { --n: 3; }
.loading span:nth-child(4) { --n: 4; }
.loading span:nth-child(5) { --n: 5; }
.loading span:nth-child(6) { --n: 6; }
.loading span:nth-child(7) { --n: 7; }
.loading span:nth-child(8) { --n: 8; }
.loading span:nth-child(9) { --n: 9; }
.loading span:nth-child(10) { --n: 10; }
4、最后来写animate动画，有了前面详细的分析，这里就没什么好解释的了，高度从0.01倍过渡到1.2倍再过渡到初始的0.01倍，1.2倍是从15%开始的，所以才有了上面的“突然”的效果。至此loading动画就写完了。
@keyframes load-ani {
0%, 100% {
transform: scaleY(0.01) translateX(-10px);
}
15% {
transform: scaleY(1.2) translateX(20px);
}
90%, 100% {
background-color: #aed4fb;
}
}
我们重点来分析下span动画依次执行的原理，先来说下css3 的 var 变量，先看下面的代码：
div{
--green: #4CAF50;
background-color: var(--green);
}
设置div的背景色为#4CAF50。这里的--green就是一个变量，变量名是green，值是“#4CAF50”，“--”是css3规定的变量的前缀，而var()里面放的是变量名，表示使用这个变量的值，当然，还有一些用法，如默认值等，这个关注IT学堂，我们将会在后面的文章中专门介绍css3 var的用法。
calc比var要出名，用过的人一定很多，它能进行css的一些计算，如加减乘除，需要注意的是，操作符左右要有空格，否则不起作用，如：
calc(10px + 10px) //20px calc(10px+10px) //错误
理解了var和calc，就很简单了：calc(var(--n) * 0.05s) 其实就是拿变量n*0.05s，而n则在第三步对每个span都进行了设置，随着n的不断变大，延时时间也就依次变长。
好了，今天的教程就到这里了，不知道您有收获没。有疑问和建议的，可以在下方留言。关注IT学堂，每天都有干货哦！
loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。
今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loading效果吧，文章中的代码可以从github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我们来看看需要实现的效果。
效果图
然后我们一个个来看都是怎么实现的吧。
loadingA的效果就如音乐播放时的动态条一般，不停的连续执行。
其主要实现思路如下：
每个竖状条都是一个简单的div，div为一个小的圆形。
给每个div加上一个动画效果，该动画的效果是高度逐渐变长，最后再变回原样。
每个div延迟不同的时间才开始执行，这样就会有先后的层次感。
然后我们来看看各个部分的代码实现。
基本的div元素
基本的div元素是一个小的圆形。
基本的div元素
定义动画
定义的动画主要是改变div的高度，在完成50%的时候达到最高值，完成100%时恢复到原来高度。
动画效果
设置动画
将定义的动画添加至animation属性，设置一个动画总执行时间，然后给5个div设置不同的延时时间。
设置动画
HTML元素
将以上设置的CSS属性都添加至HTML元素中。
HTML元素
将以上代码写完后，直接在浏览器运行就可以看到如loadingA的效果了。
如果细心的看完loadingA的实现过程，一定可以联想到loadingB的实现。
loadingA是通过给高度加动画，那么loadingB就是通过给宽度加动画，同样给5个div不同的延迟时间。
这里我只给出其动画定义，其他的内容与loadingA类似，详细的内容可以通过github去看。
loadingB动画
loadingC的实现效果如下。
loadingC
在loadingA和loadingB中是通过给高度和宽度增加动画实现的，而loadingC是通过给五个div增加纵向位移实现的。
loadingC实现的关键点就在于translateY的使用，因为动画是从下往上跳动，所以在完成度50%时，translateY设定为负值。
其定义的动画部分代码如下所示。
定义动画
loadingD的实现效果如下。
loadingD效果
通过效果图我们发现有两点差异：
loading过程中透明度会发生变化，这个通过opacity实现。
在接近完成时有个上下轻微抖动的效果，这个通过设置小单位的正负translateY值。
得到的动画代码如下。
loadingD动画
loadingE的动画效果如下。
loadingE
loadingE的效果同loadingD类似，loadingD是通过纵向的位移变换，可以通过translateY实现。
loadingE是通过水平方向位移变换，可以通过translateX来实现。
而有一点不同的是，loadingE的div初始位置就是translateX(-300px)，表示从左侧开始运动。
loadingE动画
loadingF定义的动画如下所示。
loadingF
loadingF是旋转效果，可以很容易想到是通过rotate实现。
loadingF中只有一个div，边框设置为虚线即可，其CSS样式如下。
loadingF基本样式
其定义的动画样式如下。
loadingF定义动画
loadingG与loadingH的动画效果如下。
loadingG&loadingH
loadingG与loadingH类似，loadingH在loadingG的基础上增加了几个点。
loadingG中是通过设置一个纵向的div-1，在该div-1内增加一个div-2，div-2就是转动的圆点，div-2通过绝对定位计算出实际位置，当div-1大小变化时，div-2也应该重新计算位置。
div-2的CSS代码如下所示。
loadingG基本样式
在loadingH中，div-1内有四个div，分别表示转动的四个圆点，也是通过绝对定位计算偏移位置。
最后设置动画，只需要让div-1在一个动画周期内旋转360度即可。
loadingG
loadingI的效果图如下所示。
loadingI
loadingI的动画主要涉及到放大缩小和旋转两个方面，放大缩小通过scale实现，旋转通过rotate实现。具体的可以看看github上的完整代码。
今天这篇文章主要是教大家如何使用CSS3的动画特性去实现loading效果，完全可以不用借助于第三方库，大家也动动手自己实现一下吧。
击右上方红色按钮关注“web秀”，让你真正秀起来
以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？
CSS3 Grid布局实现Loading动画效果
好的前端动画效果，能给用户带来非常舒适的体验效果，更甚者，有用户觉的你这个动画效果非常nice，反复操作，就为看你这个动画。停留时间，预览量上了，带来的收益也不是一丁点吧。
当然也不用为了动画，而额外的来制作动画效果。比如一个弹框，可以直接渐变出现的，你还加了飞了一圈出现，那就是不必要的动画了。
所以恰大好处的动画效果，能带来非常不错的效果。
下面我们来学习如果只做一些简单的动画效果：
CSS3 Grid布局实现Loading动画效果
CSS3 Grid布局实现Loading动画效果
上图的动画，就是一个简单的loading加载效果，而且是一个3x3的九宫格。是因为旋转才变成一个菱形的样子。我们先来画出3x3的九宫格：
html
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
这里用9个span来做每个格子元素。
css
body {
margin: 0;
height: 100vh; /*=100%*/
display: flex; /*flex布局*/
align-items: center; /*flex布局：垂直居中*/
justify-content: center; /*flex布局：水平居中*/
background-color: black;
}
.loading {
width: 10em;
height: 10em;
display: grid; /*grid布局*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em; /*grid 每个item之间的间距*/
}
/**
* --name 是css中定义变量的方式
* 可以直接用 var(--name) 使用
*/
.loading span {
background-color: var(--color); /*背景颜色*/
}
.loading span:nth-child(2n+2) {
/*n=0: 2*/
/*n=1: 4*/
/*n=2: 6*/
/*n=3: 8*/
/*n=4: 10(不存在)*/
--color: #f13f84;
}
.loading span:nth-child(4n+3) {
/*n=0: 3*/
/*n=1: 7*/
/*n=2: 11(不存在)*/
--color: #46b0ff;
}
.loading span:nth-child(4n+1) {
/*n=0: 1*/
/*n=1: 5*/
/*n=2: 9*/
/*n=3: 13(不存在)*/
--color: #44bb44;
}
CSS3 Grid布局实现Loading动画效果
grid-template-columns: 该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。
repeat: 表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。
有了九宫格布局后，我们直接旋转这个loading元素，制作动画。
.loading {
...
transform: rotate(45deg); /*旋转45°*/
}
.loading span {
background-color: var(--color);
/**
* 动画名字是blinking
* 动画整个时间是2s
* 每个元素的执行延时时间 var(--delay)
* 动画的速度曲线 由慢到快 ease-in-out
* 永久执行 infinite
*/
animation: blinking 2s var(--delay) ease-in-out infinite;
animation-fill-mode: backwards;
}
/**
* 每个元素执行动画延时时间变量
*/
.loading span:nth-child(7) {
--delay: 0s;
}
.loading span:nth-child(4n+4) {
--delay: 0.2s;
}
.loading span:nth-child(4n+1) {
--delay: 0.4s;
}
.loading span:nth-child(4n+2) {
--delay: 0.6s;
}
.loading span:nth-child(3) {
--delay: 0.8s;
}
/**
* 动画效果
*/
@keyframes blinking {
0%, 20% {
transform: rotate(0deg) scale(0);
}
40%, 80% {
/*
* 旋转一圈rotate(1turn)[转、圈（Turns）。一个圆共1圈]
* 缩放 scale 如果大于1就代表放大；如果小于1就代表缩小
*/
transform: rotate(1turn) scale(1);
}
100% {
transform: rotate(2turn) scale(0);
}
}
animation语法
animation: name duration timing-function delay iteration-count direction;
1、animation-name 规定需要绑定到选择器的 keyframe 名称。
2、animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
3、animation-timing-function 规定动画的速度曲线。
4、animation-delay 规定在动画开始之前的延迟。
5、animation-iteration-count 规定动画应该播放的次数。
6、animation-direction 规定是否应该轮流反向播放动画。
CSS3 Grid布局实现Loading动画效果
动画的速度曲线
1、linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
2、ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
3、ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
4、ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
5、ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
6、cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
CSS3 Grid布局实现Loading动画效果
CSS3动画基础知识可以看看 《如何快速上手基础的CSS3动画》 这篇文章，里面用更小的示例，讲述了CSS3动画的每个属性。CSS3动画，无外乎就是animation、transform、transition等属性的使用，记住他们每个的作用特效就可以了。
喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
