CSS3学习记录之loading动画
loading动画就是在加载一些网页内容的时候呈现出来的小动画，记录一下学到的几种loading动画：
效果：http://39.105.101.122/myhtml/CSS/Loading/loading.html
第一个是一个圆形的一部分在旋转，实现原理：
在相应的位置添加一个 i 标签，然后设置width和height（值一样），然后添加border-radius：50%，此时这个i标签呈现出来的是一个圆，为了和图示效果一样，需要把这个圆遮住多半个，用background: linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%);这样用背景过渡的方法就让上面70%透明掉了。然后添加动画:0%{rotate(0deg)} 50%{rotate(180deg)} 100%{rotate(360deg)}, animation: loading-1 .2s linear 0s infinite;//循环播放。
第二个是几个竖线在不停的伸缩，实现原理：
在相应的位置添加若干个 i 标签，这里添加了6个，i 标签是行内元素，因此他们可以在一行内，设置margin-right，width为4像素，height可以自己随便定义。然后添加颜色等属性。然后定义一个动画。
@keyframes loading-2{ 0%{ transform: scaleY(1); } 50%{ transform: scaleY(0.4); } 100%{ transform: scaleY(1); } }
0%和100%的时候值要一样，这样才能平滑过渡。50%的时候可以伸缩相应的值。然后给每个 i 标签添加动画属性：animation: loading-2 1s ease-in .1s infinite;
一个动画循环是1s，0.1s延迟，循环播放，每个 i 标签的动画延迟时间递增一点，显示的结果就会呈现出波浪的效果。
第三个是围成一个圆的8个小圆在不停从大变小同时颜色由深变浅，这个原理和第二个是相同的，先添加8个 i 标签，设置position：absolute，width、height、border-radius、颜色、它的父级div不设置width和height，这样没有宽度和高度的父级div的左上角也是居中的，然后给每个 i 标签设置相应的top和left，也就是围着中心点均匀绕开。这样就完成了布局。然后添加动画：
@keyframes loading-3{ 0%{ /*background: linear-gradient(transparent 0%);*/ opacity: 1; transform: scale(2); } 100%{ /*background: linear-gradient(transparent 0%,transparent 100%);*/ transform: scale(0.5); opacity: 0; } }
在0%的时候opacity：1（不透明度是1，即完全不透明），scale（2），大小为原大小的两倍，100%的时候opacity为0，完全透明，大小为原大小的一半，这样就能实现一边变小同时颜色变淡的效果。然后给 i 标签添加：animation: loading-3 .8s ease-in .1s infinite;每个 i 标签的延迟时间是递增的，并且递增到0.8s和一个循环的动画时间一样，这样才能保证只有一个最大的，后面的都是逐渐缩小的，如果想让在打开页面之后动画就是播放着的，可以给第一个延迟时间改成-0.8s，后面的递增0.1s即可。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .box{ width: 100%; padding: 3%; /*margin: 100px auto;*/ box-sizing: border-box; overflow: hidden; /*background-color: #ccc;*/ } .loader{ width: 30%; height: 200px; /*background-color: #fff;*/ border: 1px solid #ccc; float: left; margin-right: 3%; box-sizing: border-box; position: relative; display: flex; align-items: center; justiy-content: center; } @keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } .loading_1{ width: 35px; height: 35px; margin: auto; border-radius: 50%; position: relative; background-color: #000; /*display: block;*/ background: linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%); animation: loading-1 .2s linear 0s infinite; } @keyframes loading-2{ 0%{ transform: scaleY(1); } 50%{ transform: scaleY(0.4); } 100%{ transform: scaleY(1); } } .loading_2{ width: auto; height: 35px; margin: auto; /*background-color: #000;*/ } .loading_2 i{ width: 4px; height: 35px; border-radius: 2px; margin-right: 4px; margin-left: 4px; background-color: #000; float: left; } .loading_2 i:nth-child(1){ animation: loading-2 1s ease-in .1s infinite; } .loading_2 i:nth-child(2){ animation: loading-2 1s ease-in .2s infinite; } .loading_2 i:nth-child(3){ animation: loading-2 1s ease-in .3s infinite; } .loading_2 i:nth-child(4){ animation: loading-2 1s ease-in .4s infinite; } .loading_2 i:nth-child(5){ animation: loading-2 1s ease-in .5s infinite; } .loading_2 i:nth-child(6){ animation: loading-2 1s ease-in .6s infinite; } @keyframes loading-3{ 0%{ /*background: linear-gradient(transparent 0%);*/ opacity: 1; transform: scale(2); } 100%{ /*background: linear-gradient(transparent 0%,transparent 100%);*/ transform: scale(0.5); opacity: 0; } } .loading_3{ /*padding: 2px;*/ width: 30px; height: 30px; margin: auto; background-color: #000; position: relative; } .loading_3 i{ width: 8px; height: 8px; border-radius: 4px; position: absolute; /*clear: both;*/ display: block; background-color: black; } .loading_3 i:nth-child(1){ top: 25px; left: 0px; background: red; animation: loading-3 .8s ease-in .1s infinite; } .loading_3 i:nth-child(2){ top: 17px; left: 17px; background: #ff6600; animation: loading-3 .8s ease-in .2s infinite; } .loading_3 i:nth-child(3){ top: 0px; left: 25px; background: yellow; animation: loading-3 .8s ease-in .3s infinite; } .loading_3 i:nth-child(4){ top: -17px; left: 17px; background: green; animation: loading-3 .8s ease-in .4s infinite; } .loading_3 i:nth-child(5){ top: -25px; left: 0px; background: #00ffff; animation: loading-3 .8s ease-in .5s infinite; } .loading_3 i:nth-child(6){ top: -17px; left: -17px; background: blue; animation: loading-3 .8s ease-in .6s infinite; } .loading_3 i:nth-child(7){ top: 0px; left: -25px; background: #ff00ff; animation: loading-3 .8s ease-in .7s infinite; } .loading_3 i:nth-child(8){ top: 17px; left: -17px; background: #ff0099; animation: loading-3 .8s ease-in .8s infinite; } </style> <body> <div class="box"> <div class="loader"> <i class="loading_1"></i> </div> <div class="loader"> <div class="loading_2"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader"> <div class="loading_3"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </div> </body> </html>
