悄悄地,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