HTML5怎么實現可交互的圓形進度條特效

這篇文章主要介紹“HTML5怎么實現可交互的圓形進度條特效”，在日常操作中，相信很多人在HTML5怎么實現可交互的圓形進度條特效問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5怎么實現可交互的圓形進度條特效”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　插件描述：這是一款效果非常炫酷的HTML5可交互的圓形進度條特效。這個圓形進度條由32個圓角矩形組成，用戶可以點擊每一個圓角矩形將進度條設置到相應的刻度上。它使用js來制作交互動畫效果，并帶有鼠標滑過時的效果，非常的酷。

　　制作方法

　　HTML結構

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

　　0

　　......

　　CSS樣式

　　整個圓形進度條設置了固定的寬度和高度，并設置居中顯示。.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屬性來制作透視效果。.barPie?{

　　-webkit-perspective:?1000px;

　　perspective:?1000px;

　　}

　　所有的圓角矩形都是由元素來制作，通過將它們進行不同角度的旋轉，組成一個圓形。.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偽元素用于制作圓角矩形的槽，它們的顏色被設置為0.15透明度的白色。并在鼠標滑過時設置它們的透明度為0.7，它的兄弟節點的透明度為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狀態的圓角矩形設置為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;

　　}

到此，關于“HTML5怎么實現可交互的圓形進度條特效”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！