如何用純CSS3制作進(jìn)度條

條紋進(jìn)度條

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到芝罘網(wǎng)站設(shè)計(jì)與芝罘網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋芝罘地區(qū)。

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

.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制作進(jìn)度條的簡(jiǎn)單示例代碼

p id="se_lev"安全級(jí)別 ：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);

原理：大盒子里套個(gè)小盒子，

大盒子給固定寬

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

這個(gè)css 里的50% 將來(lái)是要用來(lái)用js動(dòng)態(tài)化的，一但動(dòng)態(tài)起來(lái)，就達(dá)成了進(jìn)度條的效果了

如何用純CSS編寫一個(gè)實(shí)用的進(jìn)度條

1、寫一個(gè)樣式為.containe的div用來(lái)包含進(jìn)度條，其次是用樣式為.title的div來(lái)包裹標(biāo)題。

2、接下來(lái)，添加樣式為.bar的di來(lái)包含填充和未填充的進(jìn)度條樣式。最后，在.bar里添加樣式為.bar-unfill

和.bar-fill的span標(biāo)簽。

Plain

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

.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.首先建一個(gè)白色的背景

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

5.定義進(jìn)度條的樣式，先令他的寬度為?100%?，因?yàn)檫@也會(huì)應(yīng)用于定義和未定義的部分。所以在我們的?.bar-fill?的類里，令他的寬度為?0?作為起始的寬度，添加CSS3的?transition?屬性使動(dòng)畫效果更加流暢，最后，我們將添加CSS3里的?animation?屬性，定義動(dòng)畫的名字，和?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?規(guī)則來(lái)設(shè)置寬度從?0?變化到?100%?。你也能定制你自己喜歡的變化。

@-webkit-keyframes?progressbar?{?

from?{

width:0

}

to?{

width:100%

}

}

/*?Standard?syntax?*/

@keyframes?progressbar?{

from?{

width:0

}

to?{

width:100%

}

}

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

.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.最后產(chǎn)生動(dòng)畫效果

.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實(shí)現(xiàn)不規(guī)則自定義進(jìn)度條效果

進(jìn)度條效果做為網(wǎng)站常用模塊無(wú)論是投資理財(cái)類、還是眾籌類、加載提示類網(wǎng)站已經(jīng)比較常見。另外，HTML5新增了 progress 標(biāo)簽，其重要程度可見一斑。

由于HTML的 progress 存在兼容性問(wèn)題，本文主要講解如何通過(guò)CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的自定義進(jìn)度條效果！

前端開發(fā)常用的進(jìn)度條效果如下：

（環(huán)形進(jìn)度條下次再講?。?/p>

這兩個(gè)算是比較有代表性的，一個(gè)的均勻的一個(gè)的不均勻的，實(shí)現(xiàn)起來(lái)略有不用。

以第一個(gè)為例：

這種比較簡(jiǎn)單，只需要兩個(gè) div 標(biāo)簽就可以了（一個(gè)標(biāo)簽也可以實(shí)現(xiàn)，后文會(huì)講到）

原理介紹：

外層 div 用來(lái)顯示進(jìn)度條總長(zhǎng)度以及背景色；內(nèi)層div用來(lái)顯示當(dāng)前進(jìn)度條進(jìn)度，和當(dāng)前進(jìn)度條顏色。

結(jié)構(gòu)如下：

樣式如下：

此時(shí)效果如下：

只需要利用 js 動(dòng)態(tài)控制上層 div 的寬度就可以實(shí)現(xiàn)最簡(jiǎn)單的自定義進(jìn)度條了.

** 第二種帶原點(diǎn)的進(jìn)度條 **

此時(shí)實(shí)現(xiàn)原理跟第一種類似，只是背景色替換成了背景圖片，圖片如下：

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

如果上面的能理解我想這個(gè)就不難理解了吧，不過(guò)為了顯得文章完整還是簡(jiǎn)單做一個(gè)demo如下：

效果如下：

如何使用CSS3制作一個(gè)簡(jiǎn)單的進(jìn)度條

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

名稱欄目：css樣式實(shí)現(xiàn)進(jìn)度,簡(jiǎn)單的css3進(jìn)度條
本文來(lái)源：http://chinadenli.net/article20/dsdejjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站收錄、企業(yè)建站、電子商務(wù)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)