如何用純CSS3制作進度條

條紋進度條

站在用戶的角度思考問題，與客戶深入溝通，找到芝罘網站設計與芝罘網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：成都網站設計、網站建設、企業官網、英文網站、手機端網站、網站推廣、空間域名、虛擬主機、企業郵箱。業務覆蓋芝罘地區。

若要制作一個條紋進度條，我們應該把.bar-fill重新命名為.bar-fill-stripes。我們將使用backgrou-image屬性里的 linear-gradient同時聲明它的顏色。剩余的CSS3動畫效果也是和上述相同，看下面的代碼：

.bar-fill-stripes {

height:15px;

display:block;

background:#e74c3c;

width:0;

border-radius:8px;

background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);

-webkit-transition:width .8s ease;

-moz-transition:width .8s ease;

transition:width .8s ease;

-webkit-animation:progressbar 7s infinite;

animation:progressbar 7s infinite

}

如何使用CSS3制作進度條的簡單示例代碼

p id="se_lev"安全級別 ：span id="big"span id="min"/span/span高/p

span#big { vertical-align:middle; display:inline-block; margin-left:6px; margin-right:20px; width:183px; height:14px; border:2px solid #a4a4a4; border-radius:14px; behavior: url(PIE.htc);}

span#min { display:block; height:100%; width:70%; background:#fe0002; border-top-left-radius:14px; border-bottom-left-radius:14px; behavior: url(PIE.htc);

原理：大盒子里套個小盒子，

大盒子給固定寬

小盒子的寬用%表示，（利用寬度的繼承性，比如50%，就只有大盒一半寬）

這個css 里的50% 將來是要用來用js動態化的，一但動態起來，就達成了進度條的效果了

如何用純CSS編寫一個實用的進度條

1、寫一個樣式為.containe的div用來包含進度條，其次是用樣式為.title的div來包裹標題。

2、接下來，添加樣式為.bar的di來包含填充和未填充的進度條樣式。最后，在.bar里添加樣式為.bar-unfill

和.bar-fill的span標簽。

Plain

3.簡單的進度條的CSS代碼.container?類里將?width?定義為?30%?使進度條能夠自適應。放一些簡單的?border-radius?之類的屬性在我們的?.title?類里以修改頂部和底部的左邊的邊框弧度，創建一個簡單明了的平板式設計。

.container?{

width:30%;

margin:0?auto

}

.title?{

background:#545965;

color:#fff;

padding:15px;

float:left;

position:relative;

-webkit-border-top-left-radius:5px;

-webkit-border-bottom-left-radius:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-bottomleft:5px;

border-top-left-radius:5px;

border-bottom-left-radius:5px

}

4.首先建一個白色的背景

.bar-unfill?{height:15px;display:block;background:#fff;width:100%;border-radius:8px}

5.定義進度條的樣式，先令他的寬度為?100%?，因為這也會應用于定義和未定義的部分。所以在我們的?.bar-fill?的類里，令他的寬度為?0?作為起始的寬度，添加CSS3的?transition?屬性使動畫效果更加流暢，最后，我們將添加CSS3里的?animation?屬性，定義動畫的名字，和?duration?和?animation-iteration-count?屬性。

.bar-fill?{

height:15px;

display:block;

background:#45c9a5;

width:0;

border-radius:8px;

-webkit-transition:width?.8s?ease;

-moz-transition:width?.8s?ease;

transition:width?.8s?ease;

-webkit-animation:progressbar?7s?infinite;

animation:progressbar?7s?infinite

}

6.使用CSS3里的?@keyframe?規則來設置寬度從?0?變化到?100%?。你也能定制你自己喜歡的變化。

@-webkit-keyframes?progressbar?{?

from?{

width:0

}

to?{

width:100%

}

}

/*?Standard?syntax?*/

@keyframes?progressbar?{

from?{

width:0

}

to?{

width:100%

}

}

7.條紋進度條，應該把?.bar-fill?重新命名為?.bar-fill-stripes?。使用?backgrou-image?屬性里的?linear-gradient?同時聲明它的顏色。剩余的CSS3動畫效果也是和上述相同，看下面的代碼：

.bar-fill-stripes?{

height:15px;

display:block;

background:#e74c3c;

width:0;

border-radius:8px;

background-image:linear-gradient(-45deg,rgba(255,255,255,.2)?25%,transparent?25%,transparent?50%,rgba(255,255,255,.2)???50%,rgba(255,255,255,.2)?75%,transparent?75%,transparent);

-webkit-transition:width?.8s?ease;

-moz-transition:width?.8s?ease;

transition:width?.8s?ease;

-webkit-animation:progressbar?7s?infinite;

animation:progressbar?7s?infinite

}

追蹤

Tracker

8.最后產生動畫效果

.track-wrap?{

position:relative;

top:-18px;

-webkit-animation:progressbar2?7s?infinite;

animation:progressbar2?7s?infinite

}

.track?{

height:20px;

display:block;

background:#e74c3c;

width:20px;

border-radius:10px;

position:relative;

left:-12px

}

@-webkit-keyframes?progressbar2?{

from?{

left:0

}

to?{

left:100%

}

}

/*?Standard?syntax?*/

@keyframes?progressbar2?{

from?{

left:0

}

to?{

left:100%

}

CSS實現不規則自定義進度條效果

進度條效果做為網站常用模塊無論是投資理財類、還是眾籌類、加載提示類網站已經比較常見。另外，HTML5新增了 progress 標簽，其重要程度可見一斑。

由于HTML的 progress 存在兼容性問題，本文主要講解如何通過CSS實現一個簡單的自定義進度條效果！

前端開發常用的進度條效果如下：

（環形進度條下次再講！）

這兩個算是比較有代表性的，一個的均勻的一個的不均勻的，實現起來略有不用。

以第一個為例：

這種比較簡單，只需要兩個 div 標簽就可以了（一個標簽也可以實現，后文會講到）

原理介紹：

外層 div 用來顯示進度條總長度以及背景色；內層div用來顯示當前進度條進度，和當前進度條顏色。

結構如下：

樣式如下：

此時效果如下：

只需要利用 js 動態控制上層 div 的寬度就可以實現最簡單的自定義進度條了.

** 第二種帶原點的進度條 **

此時實現原理跟第一種類似，只是背景色替換成了背景圖片，圖片如下：

這兩個圖片除了顏色不一樣以外其他是一樣大小的！

如果上面的能理解我想這個就不難理解了吧，不過為了顯得文章完整還是簡單做一個demo如下：

效果如下：

如何使用CSS3制作一個簡單的進度條

如果不考慮IE的話，用css3應該不難：1、邊框用背景圖或純色都可以，配合圓角和陰影；2、里面的進度條可以用垂直方向的線性漸變及陰影配合實現；3、最后配合js動態修改里面進度條div的寬度和文字的顯示即可。

名稱欄目：css樣式實現進度,簡單的css3進度條
本文來源：http://vcdvsql.cn/article20/dsdejjo.html

成都網站建設公司_創新互聯，為您提供自適應網站、用戶體驗、網站收錄、企業建站、電子商務、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯