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;

}

具体的javascript实现代码请参考下载文件。