彩虹Loading
效果圖
HTML結(jié)構(gòu)
<div class="mask">
<div class="loading">
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
</div>
</div>
主要有兩部分一部分是mask樣式的遮罩層渴庆，還有就是里面的loading称鳞，veryical-barlaoding樣式。
CSS樣式
CSS部分分成兩部分來看首先看遮罩層的樣式
.mask{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255,0.8);
z-index: 250;
overflow: hidden;
pointer-events: none;
}
.mask::before {
content: "\2716";
pointer-events: auto;
position: absolute;
top:5%;
left: 80%;
font-size: 3rem;
}
mask樣式設(shè)置了position為相對(duì)body元素為絕對(duì)位置脫離正常文檔流叁丧，并設(shè)置為全屏啤誊，設(shè)置z軸層數(shù)為250 完全沒有暗喻的意思哈岳瞭。設(shè)置布局為彈性布局，并使內(nèi)部元素 水平 垂直 居中蚊锹，并設(shè)置 鼠標(biāo)事件失效瞳筏。
.mask::before利用前置偽元素 創(chuàng)建關(guān)閉圖標(biāo)，實(shí)現(xiàn)loading關(guān)閉功能牡昆。
接下來看一下重頭戲loading姚炕，veryical-bar
.loading{
height: 4rem;
width: 8rem;
display: flex;
align-items: center;
}
.loading .vertical-bar{
width: 1rem;
height: 4rem;
margin: 0 3px;
background-color: #000;
animation: loading-bar 0.8s infinite;
}
.loading .vertical-bar:nth-child(1){
background-color: black;
}
.loading .vertical-bar:nth-child(2){
animation-delay: 0.1s;
background-color: red;
}
height: 4rem; width: 8rem;首先設(shè)置loading的長寬;
display: flex; align-items: center; 設(shè)置為彈性布局，這樣內(nèi)部塊級(jí)元素不會(huì)獨(dú)占一行了迁杨，并設(shè)置內(nèi)部豎條垂直居中钻心。
通過.loading .vertical-bar主要設(shè)置了豎條的長寬，外部間隔铅协，背景色 還有變化的動(dòng)畫捷沸。
通過.loading .vertical-bar:nth-child(n)設(shè)置內(nèi)部一共8個(gè)豎條每個(gè)豎條的背景色不同 而且 動(dòng)畫開始的延遲時(shí)間不同。
@keyframes loading-bar{
0%{
height: 4rem;
opacity: 0.4;
}
50%{
height: 0rem;
opacity: 1;
}
100%{
height: 4rem;
opacity: 0.4;
}
}
定義了豎條的動(dòng)態(tài)幀狐史，起始滿長度痒给；0.4的不透明度，中途一般長度骏全，1的不透明度苍柏，最后又是滿長度；0.4的不透明度姜贡。
結(jié)語
本文所有源碼可以點(diǎn)擊鏈接下載试吁，源碼中還有彩虹圈圈Loading的彩蛋哦，趕緊去看看吧楼咳。
