css音量调节,CSS3 音量调节旋钮

CSS

语言：

CSSSCSS

确定

ul {

height: 40px;

left: 50%;

margin-left: -100px;

margin-top: -20px;

position: absolute;

top: 50%;

text-align: center;

width: 200px; }

.knob {

background: -webkit-repeating-linear-gradient(145deg, #fff, #fff 3px, #333 3px, #333 6px);

background: repeating-linear-gradient(-55deg, #fff, #fff 3px, #333 3px, #333 6px);

border: 2px solid #333;

border-radius: 50%;

display: inline-block;

height: 30px;

margin: 0px 5px;

position: relative;

width: 30px; }

.knob:before {

background: #fff;

border: 2px solid #333;

border-radius: 50%;

content: "";

display: block;

height: 30px;

left: 2px;

position: absolute;

top: -5px;

width: 30px; }

.knob:after {

background: #333;

content: "";

display: block;

height: 10px;

left: 18px;

position: absolute;

top: -5px;

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

-webkit-transform-origin: 0 15px;

-ms-transform-origin: 0 15px;

transform-origin: 0 15px;

width: 2px; }

.knob:nth-child(1):after {

-webkit-transform: rotate(88deg);

-ms-transform: rotate(88deg);

transform: rotate(88deg); }

.knob:nth-child(2):after {

-webkit-transform: rotate(104deg);

-ms-transform: rotate(104deg);

transform: rotate(104deg); }

.knob:nth-child(3):after {

-webkit-transform: rotate(301deg);

-ms-transform: rotate(301deg);

transform: rotate(301deg); }

.knob:nth-child(4):after {

-webkit-transform: rotate(182deg);

-ms-transform: rotate(182deg);

transform: rotate(182deg); }