Linux触摸屏数字密码锁代码,HTML5 圆形数字密码锁

CSS

语言：

CSSSCSS

确定

html {

background: #25231f;

width: 100%;

}

body {

padding: 50px;

}

.radialselector {

position: relative;

width: 500px;

height: 500px;

margin: 0 auto;

}

.ring {

display: block;

width: 200px;

height: 200px;

position: absolute;

top: 0;

transition: transform 0.25s, box-shadow 0.25s;

overflow: hidden;

}

.ring__display {

width: 100%;

height: 100%;

display: block;

border-radius: 50%;

position: absolute;

}

.ring__interaction {

background: rgba(0, 0, 0, 0.1);

width: 100%;

height: 100%;

display: block;

border-radius: 50%;

position: absolute;

}

.ring:hover,

.ring:focus {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

transition: box-shadow 0.25s;

}

.ring:hover + .ring {

transition: box-shadow 0.25s;

}

.ring--alpha {

width: 500px;

height: 500px;

background: #333;

border-radius: 250px;

}

.ring--beta {

width: 400px;

height: 400px;

background: #444;

border-radius: 200px;

left: 50px;

top: 50px;

}

.ring--gamma {

width: 300px;

height: 300px;

background: #555;

border-radius: 150px;

left: 100px;

top: 100px;

}

.ring--epsilon {

width: 200px;

height: 200px;

background: #666;

border-radius: 100px;

left: 150px;

top: 150px;

}

.ring__label {

top: 50%;

width: 100%;

height: 100%;

text-align: center;

transform-origin: 50% 0;

position: absolute;

transform: rotate(0) translate(0, -50%);

pointer-events: none;

color: rgba(0, 0, 0, 0.4);

font: 18px sans-serif;

line-height: 50px;

transition: color 1s;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.ring:hover .ring__label {

color: #fff;

transition: color 0.25s;

}

.ring__label:nth-child(2) {

transform: rotate(120deg) translate(0, -50%);

}

.ring__label:nth-child(3) {

transform: rotate(240deg) translate(0, -50%);

}

.ring__label:nth-child(1) {

transform: rotate(30deg) translate(0, -50%);

}

.ring__label:nth-child(2) {

transform: rotate(60deg) translate(0, -50%);

}

.ring__label:nth-child(3) {

transform: rotate(90deg) translate(0, -50%);

}

.ring__label:nth-child(4) {

transform: rotate(120deg) translate(0, -50%);

}

.ring__label:nth-child(5) {

transform: rotate(150deg) translate(0, -50%);

}

.ring__label:nth-child(6) {

transform: rotate(180deg) translate(0, -50%);

}

.ring__label:nth-child(7) {

transform: rotate(210deg) translate(0, -50%);

}

.ring__label:nth-child(8) {

transform: rotate(240deg) translate(0, -50%);

}

.ring__label:nth-child(9) {

transform: rotate(270deg) translate(0, -50%);

}

.ring__label:nth-child(10) {

transform: rotate(300deg) translate(0, -50%);

}

.ring__label:nth-child(11) {

transform: rotate(330deg) translate(0, -50%);

}

.ring__label:nth-child(12) {

transform: rotate(360deg) translate(0, -50%);

}