進(jìn)度條是很常用的一個用戶體驗項，用于表示事件的處理或加載狀態(tài)，制作這些loading進(jìn)度條我們通常會使用GIF圖片來實現(xiàn)，但是這方法也有一些弊端，比如我要放大或改變顏色，這樣就不好處理了。 要解決這些問題最好就是用代碼來實現(xiàn)了，現(xiàn)在CSS3已經(jīng)流行起來，我們是否也嘗試一下用CSS來實現(xiàn)呢？方法是有的，而且很簡單，看看下面這12個使用純CSS3編寫的進(jìn)度條，loading圖標(biāo)和動畫都很棒！如下圖：

這些進(jìn)度條看起來非常的簡潔，而且創(chuàng)業(yè)十足，令人耳目一新的感覺。要怎么樣在頁面里使用這些loading進(jìn)條度呢？

下面我以左上角的時鐘為例子，代碼如下：

/* Timer*/

.timer{

width: 24px;

height: 24px;

background-color: transparent;

box-shadow: inset 0px 0px 0px 2px #fff;

border-radius: 50%;

position: relative;

margin: 38px auto;/* Not necessary- its only for layouting*/

}

.timer:after, .timer:before{

position: absolute;

content:"";

background-color: #fff;

}

.timer:after{

width: 10px;

height: 2px;

top: 11px;

left: 11px;

-webkit-transform-origin: 1px 1px;

-moz-transform-origin: 1px 1px;

transform-origin: 1px 1px;

-webkit-animation: minhand 2s linear infinite;

-moz-animation: minhand 2s linear infinite;

animation: minhand 2s linear infinite;

}

.timer:before{

width: 8px;

height: 2px;

top: 11px;

left: 11px;

-webkit-transform-origin: 1px 1px;

-moz-transform-origin: 1px 1px;

transform-origin: 1px 1px;

-webkit-animation: hrhand 8s linear infinite;

-moz-animation: hrhand 8s linear infinite;

animation: hrhand 8s linear infinite;

}

@-webkit-keyframes minhand{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@-moz-keyframes minhand{

0%{-moz-transform:rotate(0deg)}

100%{-moz-transform:rotate(360deg)}

}

@keyframes minhand{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

@-webkit-keyframes hrhand{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@-moz-keyframes hrhand{

0%{-moz-transform:rotate(0deg)}

100%{-moz-transform:rotate(360deg)}

}

@keyframes hrhand{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

HTML代碼：

直接使用這些代碼你就可以創(chuàng)建出令人滿意的進(jìn)度條特效動畫。具體的一些css元素每個人可以根據(jù)自己的需要修改。

每個進(jìn)度條特效的代碼都不同，如果需要其他的特效代碼可以直接下載源碼自己拿出來用。有問題可以參考演示網(wǎng)站，應(yīng)該容易解決。

傳送門：在線演示?|?原代碼下載? ? 注：文章參考自設(shè)計達(dá)人。

總結(jié)

以上是生活随笔為你收集整理的html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。