首页 > 建站教程 > Div+Css >  利用css3编写一个炫酷的波浪效果loading动画正文

利用css3编写一个炫酷的波浪效果loading动画

loading动画在页面过度等经常会用到，我在工作中就写过很多有趣的loading加载动画，在这里，我就分享一个波浪效果的loading动画写法（在写动画前，可以先画个草稿或动画流程图，充分思考动画执行的过程，再编写代码事半功倍哦）。

一、首先看下效果图（GIF动画录制时帧频有点低，真实动画很流畅）：


二、html代码很简单，就是一个外层div，加上几个运动的span（动画效果的只有span，外层div仅仅是为了方便span居中）： 
<div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
三、css代码我们一步一步分析：
    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%的时候，突然变很高，颜色很深，并且右移很多，然后依次变矮，变浅，左移，以此类推。通过这个分析，我们写起来就有方向了。

    3、根据动画效果和刚才的分析，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);
}
    4、分别设置十个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; }
    5、最后来写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学堂，每天都有干货哦！
TAGS: css3  loading