在寒假頹廢了一周多之后他托，終于開始慢慢的進入之前的計劃礼仗。
在學校里學習專業(yè)課的同時進行前端的學習總是感覺基礎不扎實祸憋，這兩天把基礎又復習了一下会宪，然后發(fā)現了很多自己沒有嘗試過的知識點，決定要每天分小模塊進行聯(lián)系蚯窥，也為以后做鋪墊掸鹅。借知乎記錄下自己的沉淀。
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：規(guī)定 @keyframes 動畫的名稱巍沙。
animation-duration：規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0荷鼠。
animation-timing-function：規(guī)定動畫的速度曲線句携。默認是 "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：規(guī)定動畫何時開始悄晃。默認是 0玫霎。
animation-iteration-count：規(guī)定動畫被播放的次數。默認是 1妈橄。
animation-direction：規(guī)定動畫是否在下一周期逆向地播放庶近。默認是 "normal"。
animation-play-state：規(guī)定動畫是否正在運行或暫停眷细。默認是 "running"拦盹。/paused
把瀏覽器的自動補全功能想的太復雜了，居然妄想可以用這種方法實現圓形旋轉的loading效果溪椎，哈哈哈
