|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS3徑向（圓環(huán)）進(jìn)度條【演示/源碼】
作者:admin 時間:2023-3-30 10:50:58 瀏覽:本文介紹一個CSS3實現(xiàn)的徑向（圓環(huán)）進(jìn)度條。
效果圖
實例介紹
以徑向的形式顯示進(jìn)度，圓中顯示百分比。
HTML代碼
HTML代碼結(jié)構(gòu)如下：
<div class="progress-radial progress-25">
<div class="overlay">25%</div>
</div>
代碼比較簡單，一個div里包含一個div，外層div的class值為progress-radial progress-25，注意了，這個數(shù)字25是進(jìn)度百分比的值，進(jìn)度是多少就寫相應(yīng)的數(shù)字。
CSS代碼
主要CSS代碼如下（部分）：
/* -------------------------------------
* 進(jìn)度條容器
* ------------------------------------- */
.progress-radial {
float: left;
margin-right: 30px;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #2f3439;
background-color: tomato;
}
/* -------------------------------------
* 中心圓 文字
* ------------------------------------- */
.progress-radial .overlay {
position: absolute;
width: 60px;
height: 60px;
background-color: #fffde8;
border-radius: 50%;
margin-left: 20px;
margin-top: 20px;
text-align: center;
line-height: 60px;
font-size: 16px;
}
/* -------------------------------------
* 百分比類：progress-%
* ------------------------------------- */
.progress-0 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-5 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-10 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-15 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-20 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-25 {
background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
.progress-radial 是進(jìn)度條容器樣式。
.overlay 是中心圓、文字樣式。
.progress-% 是徑向進(jìn)度條樣式。
總結(jié)
本文介紹了CSS3實現(xiàn)的徑向（圓環(huán)）進(jìn)度條，主要是介紹樣式，在實際場景中，你可能需要配合JavaScript來共同完成（動態(tài)）進(jìn)度條的顯示效果。
您可能對以下文章也感興趣
更多相關(guān)文章
標(biāo)簽: 徑向進(jìn)度條 圓形進(jìn)度條 進(jìn)度條 圓環(huán)進(jìn)度條
相關(guān)文章
x
- 站長推薦
