html 图片拨号,CSS3 拨号盘

CSS

语言：

CSSSCSS

确定

.dial {

position: relative;

background-color: #333;

width: 20rem;

height: 20rem;

border-radius: 50%;

}

.dial ul {

list-style: none;

}

.dial li {

width: 0.5rem;

height: 1rem;

background: #efefef;

position: absolute;

left: 50%;

top: 50%;

margin-left: -0.25rem;

transform-origin: 50% 0;

}

figure:nth-child(1) ul > li:nth-of-type(1) {

transform: rotate(30deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(2) {

transform: rotate(60deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(3) {

transform: rotate(90deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(4) {

transform: rotate(120deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(5) {

transform: rotate(150deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(6) {

transform: rotate(180deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(7) {

transform: rotate(210deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(8) {

transform: rotate(240deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(9) {

transform: rotate(270deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(10) {

transform: rotate(300deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(11) {

transform: rotate(330deg) translate3d(0, 10rem, 0);

}

figure:nth-child(1) ul > li:nth-of-type(12) {

transform: rotate(360deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial li {

width: 0.5rem;

height: 0.5rem;

margin-left: -0.25rem;

border-radius: 50%;

background: #f00;

box-shadow: inset 0 8px 6px -6px #000;

}

figure:nth-child(2) .dial ul > li:nth-of-type(1) {

transform: rotate(10deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(2) {

transform: rotate(20deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(3) {

transform: rotate(30deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(4) {

transform: rotate(40deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(5) {

transform: rotate(50deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(6) {

transform: rotate(60deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(7) {

transform: rotate(70deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(8) {

transform: rotate(80deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(9) {

transform: rotate(90deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(10) {

transform: rotate(100deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(11) {

transform: rotate(110deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(12) {

transform: rotate(120deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(13) {

transform: rotate(130deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(14) {

transform: rotate(140deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(15) {

transform: rotate(150deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(16) {

transform: rotate(160deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(17) {

transform: rotate(170deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(18) {

transform: rotate(180deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(19) {

transform: rotate(190deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(20) {

transform: rotate(200deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(21) {

transform: rotate(210deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(22) {

transform: rotate(220deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(23) {

transform: rotate(230deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(24) {

transform: rotate(240deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(25) {

transform: rotate(250deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(26) {

transform: rotate(260deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(27) {

transform: rotate(270deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(28) {

transform: rotate(280deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(29) {

transform: rotate(290deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(30) {

transform: rotate(300deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(31) {

transform: rotate(310deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(32) {

transform: rotate(320deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(33) {

transform: rotate(330deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(34) {

transform: rotate(340deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(35) {

transform: rotate(350deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(36) {

transform: rotate(360deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(37) {

transform: rotate(370deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(38) {

transform: rotate(380deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(39) {

transform: rotate(390deg) translate3d(0, 10rem, 0);

}

figure:nth-child(2) .dial ul > li:nth-of-type(40) {

transform: rotate(400deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(1) {

transform: rotate(30deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(2) {

transform: rotate(60deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(3) {

transform: rotate(90deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(4) {

transform: rotate(120deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(5) {

transform: rotate(150deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(6) {

transform: rotate(180deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(7) {

transform: rotate(210deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(8) {

transform: rotate(240deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(9) {

transform: rotate(270deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(10) {

transform: rotate(300deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(11) {

transform: rotate(330deg) translate3d(0, 10rem, 0);

}

figure:nth-child(3) ul > li:nth-of-type(12) {

transform: rotate(360deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(1) {

-webkit-transform: rotate(30deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(2) {

-webkit-transform: rotate(60deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(3) {

-webkit-transform: rotate(90deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(4) {

-webkit-transform: rotate(120deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(5) {

-webkit-transform: rotate(150deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(6) {

-webkit-transform: rotate(180deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(7) {

-webkit-transform: rotate(210deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(8) {

-webkit-transform: rotate(240deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(9) {

-webkit-transform: rotate(270deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(10) {

-webkit-transform: rotate(300deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(11) {

-webkit-transform: rotate(330deg) translate3d(0, 10rem, 0);

}

figure:nth-child(4) ul > li:nth-of-type(12) {

-webkit-transform: rotate(360deg) translate3d(0, 10rem, 0);

}

body {

background: #111;

color: #fff;

margin: 0 auto;

padding: 2rem;

width: 56rem;

}

body figure {

float: left;

width: 20rem;

height: 20rem;

background-color: #222;

margin: 2rem;

}