CSS怎么實現(xiàn)進度條和訂單進度條

這篇文章主要講解了“CSS怎么實現(xiàn)進度條和訂單進度條 ”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS怎么實現(xiàn)進度條和訂單進度條 ”吧！

簡單地效果圖如下：
 
 

 
CSS實現(xiàn)進度條：
 
html結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div id="progress">  

2.     <span>70%</span>  

3. </div>    

css樣式：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #progress{   

2.     width: 50%;    

3.     height: 30px;   

4.     border:1px solid #ccc;   

5.     border-radius: 15px;   

6.     margin: 50px 0 0 100px;   

7.     overflow: hidden;   

8.     box-shadow: 0 0 5px 0px #ddd inset;   

9. }   

10.   

11. #progress span {   

12.     display: inline-block;   

13.     width: 70%;   

14.     height: 100%;   

15.     background: #2989d8; /* Old browsers */  

16.     background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */  

17.     background: -webkit-gradient(linear, left bottombottom, rightright top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */  

18.     background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */  

19.     background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */  

20.     background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */  

21.     background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */  

22.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  

23.     background-size: 60px 30px;   

24.     text-align: center;   

25.     color:#fff;   

26. }    

27.   

對于進度條，其中的進度顏色也可以是純色，若想要用漸變的話，可以到此網(wǎng)站：http://www.colorzilla.com/gradient-editor/ ，這樣完成漸變效果就變得非常簡單，跟用PS的操作是一樣一樣的。將背景設(shè)置為漸變后，還需要設(shè)置background-size，這樣才能實現(xiàn)重復(fù)效果： 

css實現(xiàn)訂單進度條：
 
html結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div id="progressBar">  

2.      <!-- 進度條 -->  

3.      <div>  

4.          <span></span>  

5.      </div>  

6.      <!-- 五個圓 -->  

7.      <span></span>  

8.      <span></span>  

9.      <span></span>  

10.      <span></span>  

11.      <span></span>  

12. </div>  

css樣式:

CSS Code復(fù)制內(nèi)容到剪貼板

1. #progressBar{   

2.     width: 80%;   

3.     height: 50px;   

4.     position: relative;   

5.     margin: 50px 0 0 100px;   

6. }   

7. #progressBar div{   

8.     width: 100%;   

9.     height: 10px;   

10.     position: absolute;   

11.     top:50%;   

12.     left: 0;   

13.     margin-top:-20px;   

14.     border:1px solid #ddd;   

15.     background: #ccc;   

16. }   

17. #progressBar div span{   

18.     position: absolute;   

19.     display: inline-block;   

20.     background: green;   

21.     height: 10px;   

22.     width: 25%;   

23. }   

24. #progressBar>span{   

25.     position: absolute;   

26.     top:0;   

27.     margin-top: -10px;   

28.     width: 40px;   

29.     height: 40px;   

30.     border:2px solid #ddd;   

31.     border-radius: 50%;   

32.     background: green;   

33.     margin-left: -20px;   

34.     color:#fff;   

35. }   

36. #progressBar>span:nth-child(1){   

37.     left: 0%;   

38. }   

39. #progressBar>span:nth-child(2){   

40.     left: 25%;   

41.     background:green;   

42. }   

43. #progressBar>span:nth-child(3){   

44.     left: 50%;   

45.     background:#ccc;   

46. }   

47. #progressBar>span:nth-child(4){   

48.     left: 75%;   

49.     background:#ccc;   

50. }   

51. #progressBar>span:nth-child(5){   

52.     left: 100%;   

53.     background:#ccc;   

54. }   

然后用JS就能實現(xiàn)動態(tài)的進度條啦！
 

感謝各位的閱讀，以上就是“CSS怎么實現(xiàn)進度條和訂單進度條 ”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS怎么實現(xiàn)進度條和訂單進度條 這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！