純css實現進度條效果

乙個完整的進度條效果其實可以拆分一下：

一段背景；

一小段的靜態的斜紋進度條；

斜紋進度條用線性漸變 linear-gradient 類實現，原理很好理解，2個引數：

1、角度；

2、關鍵點（包含2個引數，1是顏色，2是長度位置）

display: inline-block;
width: 100px;
height: 100px;
background-image: linear-gradient(0, #f10 0px, #ddd 50px);

這是最基礎的漸變，構造了乙個100px*100px的正方形，漸變角度為0（從下到上），關鍵點a顏色#f10，開始長度為0px，關鍵b顏色#ddd，開始長度為50px，長度為點a到點b的長度差（50px）的這一段就是漸變區域，點b到末尾就是純點b的顏色#ddd的區域，即上圖的漸變其實有個隱藏的關鍵點c顏色#ddd，開始長度為100px，上圖的線性漸變完整的寫法是：

background-image: linear-gradient(0, #f10 0px, #ddd 50px, #ddd 100px);

例如我寫的這個靜態的斜紋進度條的樣式是：

linear-gradient(60deg, transparent 0, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);

漸變角度為60度；

0~0.8rem是第一段漸變區域，由於2個關鍵點的顏色相同（transparent是透明的，即顏色由背景決定），所以這一段漸變區域在忽略漸變角度的情況下其實是純色的的長度為0.8rem的長方形；

0.8rem~0.8rem是第二段漸變區域，由於2個關鍵點的長度位置相同，所以即便2個關鍵點的顏色不同，但是這一段漸變區域的長度為 2個關鍵點的長度位置的差值即0，等於沒有任何漸變效果；

0.8rem~1.6rem……同理。

那麼就構造出了這麼一段靜態的進度條，我們只需要乙個無限迴圈的動畫不斷控制background-position水平移動，就可以寫出乙個進度條的效果。

附上源**：

1
doctype html
>
2<
head
>
3<
meta 
charset
="utf-8"
>
4<
title
>process
title
>
5<
style
>
6html 
9.bg_fff 
1219
2634
4258
6970
/*動畫 
*/71
@-webkit-keyframes process 
73100% 74}
75@keyframes process 
77100% 78}
79style
>
80head
>
81<
body
>
82<
div 
class
>
83<
div 
class
="xui-maincontain pt10 bg_fff"
>
84<
div 
class
="xui-returncommission"
>
85<
div 
class
="xui-process"
>
86<
i id
="icon-flag"
class
="xui-icon-flag"
>
i>
87<
div 
class
="xui-process-static"
>
div>
88<
div 
id="process-bar"
class
="xui-process-active"
>
div>
89div
>
90div
>
91div
>
92div
>
93<
script
>94(
function
(hasget, totalget) 
101flag.style.left 
=(widthpercentage-1
) +'%
';102processbar.style.width 
=widthpercentage +'
%';103
if(widthpercentage ==0
) 106
})(10
, 20
);107
script
>
108body
>
109html
>

純css實現進度條效果

乙個完整的進度條效果其實可以拆分一下一段背景一小段的靜態的斜紋進度條斜紋進度條用線性漸變 linear gradient 類實現，原理很好理解，2個引數 1 角度 2 關鍵點包含2個引數，1是顏色，2是長度位置這是最基礎的漸變，構造了乙個100px 100px的正方形，漸變角度為0 從下到...

純css實現進度條效果

實現進度條效果

html5 中可以使用progress標記元素實現進度條效果。progress是html5中新增的狀態互動元素，用來表示頁面中的某個任務完成的進度。展示進度條的效果可以使用整數，也可以使用百分比。屬性資訊 max 定義完成的值 value 定義程序的當前值瀏覽器支援 chrome，firefox,...

純css實現進度條效果

純css實現進度條效果

純css實現進度條效果

實現進度條效果

相關推薦