進度條在網頁中常會被用到，像是上傳、下載的這些進程，都是進度條的形式顯示出來的，接下來這篇文章就給大家分享一下css3實現進度條的方法，有興趣的朋友可以參考一下。
以前如果要實現一個進度條的效果，是需要利用javascript實現的，然而CSS3的出現，讓我們現在能夠在div裡執行動畫，添加梯度和彩色元素，下面我們就來具體看一看css3實作進度條的方法。
我們可以利用css3中animation動畫控制來實現進度條的效果，以下來簡單看一下animation的相關內容
語法：animation: name duration timing-function delay iteration-count direction ;
參數：
animation-name：規定需要綁定到選擇器的keyframe 名稱。 。
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function：規定動畫的速度曲線。
animation-delay：規定在動畫開始之前的延遲。
animation-iteration-count：規定動畫應該播放的次數。
animation-direction：規定是否應該輪流反向播放動畫。
接著我們來看一個簡單css3中進度條的實例程式碼：
<div class="progress">
<!--进度条-->
<div class="loader-container"></div>
</div><!--Css3 实现。 animation 动画控制-->
html,body{
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.loader-container {
height: 100%;
width: 55%;
background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
border-radius:7px;
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
animation: loader 1s linear;
}
.progress{
width: 70%;
height: 15px;
border-radius:7px;
margin-left: 15%;
margin-top: 30%;
background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
}
@keyframes loader {
0% {
width: 0%;
}
100% {
width: 55%;
}
}css3進度條實作效果如下：
#以上就是本篇文章的全部內容了，關於上述用到的各種css3的屬性大家可以參考css3學習手冊進一步了解。
以上是css3如何實現進度條？ css3中進度條的實作方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
