純CSS3實現圓形進度條動畫

悄悄地,GIF 格式的進度條已經愈來愈少,CSS 進度條如雨後春筍般涌現。今天要介紹的這個 CSS3 進度條,效果和 Flyme OS 4 上的加載動畫同樣。css

首先,來看下最終的效果:html

 它的 HTML 結構也很簡單,但不是 Single Element:css3

<div class="spinner"><i></i></div>

外層元素 .spinner 負責顯示底部的半透明圓環:動畫

.spinner {
    font-size: 20px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
}

.spinner 裏的 i 元素被裁剪(clip)了一半,並作 0° 至 180° 的順時鐘旋轉:spa

.spinner i {
    position: absolute;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    animation: spinner-circle-clipper 1s ease-in-out infinite;
}

@keyframes spinner-circle-clipper {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

i 的 :after 僞元素一樣被裁減了一半,並作 -180° 至 180° 的順時鐘旋轉:code

.spinner i:after {
    position: absolute;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    content: '';
    animation: spinner-circle 1s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em #3aa8ed;
}

@keyframes spinner-circle {
    0% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

代碼就這麼幾行,經過 2 個元素不斷旋轉致使的角度差,配合裁剪就能實現平滑的圓環長度變化效果。orm

慢動做、放大版:htm

 PS: 你能夠經過更改 .spinner 的 font-size 來縮放進度條的大小~ blog

 

轉載自:http://c7sky.com/css3-flyme-loading-spinner.htmlip

相關文章
相關標籤/搜索