彩虹Loading

效果圖

rainbow-loading.gif

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部分分成兩部分來(lái)看首先看遮罩層的樣式

.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 完全沒(méi)有暗喻的意思哈。設(shè)置布局為彈性布局，并使內(nèi)部元素 水平 垂直 居中，并設(shè)置 鼠標(biāo)事件失效。
.mask::before利用前置偽元素 創(chuàng)建關(guān)閉圖標(biāo)，實(shí)現(xiàn)loading關(guān)閉功能。

接下來(lái)看一下重頭戲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的長(zhǎng)寬;

display: flex; align-items: center; 設(shè)置為彈性布局，這樣內(nèi)部塊級(jí)元素不會(huì)獨(dú)占一行了，并設(shè)置內(nèi)部豎條垂直居中。

通過(guò).loading .vertical-bar主要設(shè)置了豎條的長(zhǎng)寬，外部間隔，背景色 還有變化的動(dòng)畫。
通過(guò).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)幀，起始滿長(zhǎng)度；0.4的不透明度，中途一般長(zhǎng)度，1的不透明度，最后又是滿長(zhǎng)度；0.4的不透明度。

結(jié)語(yǔ)

本文所有源碼可以點(diǎn)擊鏈接下載，源碼中還有彩虹圈圈Loading的彩蛋哦，趕緊去看看吧。