這篇文章主要介紹“HTML5怎么實(shí)現(xiàn)可交互的圓形進(jìn)度條特效”，在日常操作中，相信很多人在HTML5怎么實(shí)現(xiàn)可交互的圓形進(jìn)度條特效問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML5怎么實(shí)現(xiàn)可交互的圓形進(jìn)度條特效”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在網(wǎng)站建設(shè)、做網(wǎng)站中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無(wú)錫營(yíng)銷推廣。成都創(chuàng)新互聯(lián)公司專業(yè)成都網(wǎng)站建設(shè)十年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

插件描述：這是一款效果非常炫酷的HTML5可交互的圓形進(jìn)度條特效。這個(gè)圓形進(jìn)度條由32個(gè)圓角矩形組成，用戶可以點(diǎn)擊每一個(gè)圓角矩形將進(jìn)度條設(shè)置到相應(yīng)的刻度上。它使用js來(lái)制作交互動(dòng)畫(huà)效果，并帶有鼠標(biāo)滑過(guò)時(shí)的效果，非常的酷。

制作方法

HTML結(jié)構(gòu)

組成這個(gè)圓形進(jìn)度條的32個(gè)圓角矩形每一個(gè)實(shí)際上是input.radio和的組合。div.barPie__value用于顯示當(dāng)前進(jìn)度的百分比值。包裹容器中的data-to-value用于圓形進(jìn)度條的初始值。

0

......

CSS樣式

整個(gè)圓形進(jìn)度條設(shè)置了固定的寬度和高度，并設(shè)置居中顯示。.barPie--radio?{

margin:?20px;

width:?400px;

height:?400px;

text-align:?center;

font:?700?50px?'Open?Sans?Condensed',?sans-serif;

position:?absolute;

top:?0;

left:?0;

bottom:?0;

right:?0;

margin:?auto;

}

并使用perspective屬性來(lái)制作透視效果。.barPie?{

-webkit-perspective:?1000px;

perspective:?1000px;

}

所有的圓角矩形都是由元素來(lái)制作，通過(guò)將它們進(jìn)行不同角度的旋轉(zhuǎn)，組成一個(gè)圓形。.barPie__ring__item?{

position:?absolute;

width:?34px;

height:?50%;

top:?0;

left:?50%;

margin-left:?-17px;

-webkit-transform-origin:?50%?100%;

-ms-transform-origin:?50%?100%;

transform-origin:?50%?100%;

-webkit-transition:?.1s;

transition:?.1s;

}

.barPie__ring__item:nth-of-type(1)?{

-webkit-transform:?rotate(11.25deg);

-ms-transform:?rotate(11.25deg);

transform:?rotate(11.25deg);

}

.barPie__ring__item:nth-of-type(1)::before?{

-webkit-transition-delay:?12ms;

transition-delay:?12ms;

}

...

元素的:before偽元素用于制作圓角矩形的槽，它們的顏色被設(shè)置為0.15透明度的白色。并在鼠標(biāo)滑過(guò)時(shí)設(shè)置它們的透明度為0.7，它的兄弟節(jié)點(diǎn)的透明度為0.4。.barPie__ring__item::before?{

content:?'';

display:?block;

width:?50%;

height:?30%;

border-radius:?10px;

background:?rgba(0,?0,?0,?0.15);

box-shadow:?0?0?0?1px?rgba(255,?255,?255,?0.05),?0?0?4px?rgba(0,?0,?0,?0.33)?inset;

-webkit-transition:?.3s;

transition:?.3s;

}

.barPie__ring__item:hover::before?{

opacity:?.7;

}

.barPie__ring__item:hover::before,

.barPie__ring__item:hover?——?.barPie__ring__item::before?{

background:?rgba(255,?255,?255,?0.4);

-webkit-transition:?0s?!important;

transition:?0s?!important;

}

處于checked狀態(tài)的圓角矩形設(shè)置為80%透明度的白色。.barPie__ring?:checked?——?.barPie__ring__item::before?{

background:?rgba(255,?255,?255,?0.8);

box-shadow:?0?0?4px?rgba(255,?255,?255,?0.5);

-webkit-transition:?0s;

transition:?0s;

}

到此，關(guān)于“HTML5怎么實(shí)現(xiàn)可交互的圓形進(jìn)度條特效”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！