色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3環形進度條 別動

榮姿康2年前11瀏覽0評論

CSS3環形進度條是一種常用的進度條樣式,在網頁設計中可以使用它來展示處理進度或者展示數據百分比等。

.progress-wrapper{
position:relative;
width: 80px;
height: 80px;
}
.progress-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
clip:rect(0px,80px,80px,40px);
background-color:#eee;
transform:rotate(-90deg);
}
.progress-circle{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
clip:rect(0px,40px,80px,0px);
background-color:#fff;
transform:rotate(-90deg);
}
.progress-fill{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
clip: rect(0px, 40px, 80px, 0px);
background-color: #007aff;
z-index:1;
transform-origin: 50% 50%;
}
.progress-fill::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ffffff;
transform: translate(-50%, -50%);
}

以上是CSS代碼實現環形進度條的樣式,通過clip屬性限定展示區域,通過transform實現旋轉等效果,再通過z-index屬性將填充區域置于底層,即可實現一種基礎的環形進度條效果。

在實際開發當中,我們還可以根據需求修改進度條的顏色、大小以及各個元素的位置等屬性,以達到最終的期望效果。