html5动态圆,HTML5可交互的圆形进度条特效

1、html5动态圆,html5可交互的圆形进度条特效插件描述：这是一款效果十分炫酷的html5可交互的圆形进度条特效。这个圆形进度条由32个圆角矩形组成，用户可以点击每一个圆角矩形将进度条设置到相应的刻度上。它用法js来制作交互动画效果，并带有鼠标滑过时的效果，十分的酷。制作办法html结构组成这个圆形进度条的32个圆角矩形每一个事实上是input.radio和的组合。div.barpie_value用于显示当前进度的百分比值。小包容器中的data-to-value用于圆形进度条的初始值。0.css样式囫囵圆形进度条设置了固定的宽度和高度，并设置居中显示。.barpie-radio?margin

2、:?20px;width:?400px;height:?400px;text-align:?center;font:?700?50px?&39;open?sans?condensed&39;,?sans-serif;position:?absolute;top:?0;left:?0;bottom:?0;right:?0;margin:?auto;并用法perspective属性来制作透视效果。.barpie?-webkit-perspective:?1000px;perspective:?1000px;全部的圆角矩形都是由元素来制作，通过将它们举行不同角度的旋转，组成一个圆形。.barpie_

3、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-trans

4、form:?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:?&39;&39;display:?block;width:?50%;height:

5、?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(25