CSS简单Loading（@keyframes）
在寒假颓废了一周多之后，终于开始慢慢的进入之前的计划。
在学校里学习专业课的同时进行前端的学习总是感觉基础不扎实，这两天把基础又复习了一下，然后发现了很多自己没有尝试过的知识点，决定要每天分小模块进行联系，也为以后做铺垫。借知乎记录下自己的沉淀。
html代码如下：
<div id="loadingContainer" class="loadingContainer">
<div class="loadingBack">
<div id="loading" class="loading">
<div class="loadingli loadingli1"></div>
<div class="loadingli loadingli2"></div>
<div class="loadingli loadingli3"></div>
</div>
</div>
</div>
CSS如下：
html{
font-size: 62.5%;/*16*0.625=10,1rem=10px;*/
}
html,body,div{
clear: both;
}
.loadingContainer#loadingContainer{
background-color: #FFE4C4;
height: 100%;
width: 100%;
z-index: 100;
position: absolute;
}
.loadingContainer#loadingContainer .loadingBack{
height: 20rem;
width: 34rem;
background-image: url("../images/2.png");
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.loading#loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 20.5rem;
}
.loading#loading div{
width: 5rem;
height: 5rem;
border-radius: 50%;
display: inline-block;
background-color: #FFB90F;
margin-right: 1.5rem;
animation-name: loadingScale_1;
animation-duration: 1.2s;
animation-timing-function: linear;/*动画从头到尾的速度是相同的。*/
animation-iteration-count: infinite;
-webkit-animation-name: loadingScale_1;
-webkit-animation-duration: 1.2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;/* Safari 和 Chrome */
}
.loading#loading div.loadingli1{
animation-delay: 0s;
}
.loading#loading div.loadingli2{
animation-delay: 0.4s;
}
.loading#loading div.loadingli3{
animation-delay: 0.8s;
}
/*变大变小*/
@keyframes loadingScale{
0%{
transform:scale(1);
}
50%{
transform:scale(.3);
}
100%{
transform:scale(1);
}
}
/*上下*/
@keyframes loadingScale_1{
0%{
margin-bottom: 0rem;
}
25%{
margin-bottom: 2rem;
}
50%{
margin-bottom: 0rem;
}
75%{
margin-bottom: -2rem;
}
100%{
margin-bottom: 0rem;
}
}
@keyframes通过百分比来定义帧动画（为保证浏览器正常渲染最好每次都为0-100%的动画设置）
-
animation： 所有动画属性的简写属性（除了 animation-play-state 属性）
-
animation-name：规定 @keyframes 动画的名称。
-
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
-
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
cubic-bezier即为贝兹曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0],[1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2)为自定义，x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
也就是说第四个n是y2，和x2共同决定P2的位置
-
animation-delay：规定动画何时开始。默认是 0。
-
animation-iteration-count：规定动画被播放的次数。默认是 1。
-
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
-
animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。/paused
把浏览器的自动补全功能想的太复杂了，居然妄想可以用这种方法实现圆形旋转的loading效果，哈哈哈
