css3中改变视角,CSS3 鼠标跟随视角转移

CSS

语言:

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body,

.wrap {

height: 100%;

}

body {

background: black;

overflow: hidden;

}

.wrap {

transform-style: preserve-3d;

perspective: 500px;

transition: 0.8s;

}

.sq {

float: left;

height: 10%;

width: 10%;

position: relative;

z-index: 1;

cursor: crosshair;

transition: 0.3s;

}

.sq:nth-child(1) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(1):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(1):hover ~ .wrap {

perspective-origin: 0 0;

}

.sq:nth-child(2) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(2):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(2):hover ~ .wrap {

perspective-origin: 10% 0;

}

.sq:nth-child(3) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(3):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(3):hover ~ .wrap {

perspective-origin: 20% 0;

}

.sq:nth-child(4) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(4):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(4):hover ~ .wrap {

perspective-origin: 30% 0;

}

.sq:nth-child(5) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(5):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(5):hover ~ .wrap {

perspective-origin: 40% 0;

}

.sq:nth-child(6) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(6):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(6):hover ~ .wrap {

perspective-origin: 50% 0;

}

.sq:nth-child(7) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(7):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(7):hover ~ .wrap {

perspective-origin: 60% 0;

}

.sq:nth-child(8) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(8):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(8):hover ~ .wrap {

perspective-origin: 70% 0;

}

.sq:nth-child(9) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(9):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(9):hover ~ .wrap {

perspective-origin: 80% 0;

}

.sq:nth-child(10) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(10):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(10):hover ~ .wrap {

perspective-origin: 90% 0;

}

.sq:nth-child(11) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(11):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(11):hover ~ .wrap {

perspective-origin: 0 10%;

}

.sq:nth-child(12) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(12):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(12):hover ~ .wrap {

perspective-origin: 10% 10%;

}

.sq:nth-child(13) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(13):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(13):hover ~ .wrap {

perspective-origin: 20% 10%;

}

.sq:nth-child(14) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(14):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(14):hover ~ .wrap {

perspective-origin: 30% 10%;

}

.sq:nth-child(15) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(15):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(15):hover ~ .wrap {

perspective-origin: 40% 10%;

}

.sq:nth-child(16) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(16):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(16):hover ~ .wrap {

perspective-origin: 50% 10%;

}

.sq:nth-child(17) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(17):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(17):hover ~ .wrap {

perspective-origin: 60% 10%;

}

.sq:nth-child(18) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(18):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(18):hover ~ .wrap {

perspective-origin: 70% 10%;

}

.sq:nth-child(19) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(19):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(19):hover ~ .wrap {

perspective-origin: 80% 10%;

}

.sq:nth-child(20) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(20):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(20):hover ~ .wrap {

perspective-origin: 90% 10%;

}

.sq:nth-child(21) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(21):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(21):hover ~ .wrap {

perspective-origin: 0 20%;

}

.sq:nth-child(22) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(22):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(22):hover ~ .wrap {

perspective-origin: 10% 20%;

}

.sq:nth-child(23) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(23):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(23):hover ~ .wrap {

perspective-origin: 20% 20%;

}

.sq:nth-child(24) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(24):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(24):hover ~ .wrap {

perspective-origin: 30% 20%;

}

.sq:nth-child(25) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(25):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(25):hover ~ .wrap {

perspective-origin: 40% 20%;

}

.sq:nth-child(26) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(26):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(26):hover ~ .wrap {

perspective-origin: 50% 20%;

}

.sq:nth-child(27) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(27):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(27):hover ~ .wrap {

perspective-origin: 60% 20%;

}

.sq:nth-child(28) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(28):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(28):hover ~ .wrap {

perspective-origin: 70% 20%;

}

.sq:nth-child(29) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(29):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(29):hover ~ .wrap {

perspective-origin: 80% 20%;

}

.sq:nth-child(30) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(30):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(30):hover ~ .wrap {

perspective-origin: 90% 20%;

}

.sq:nth-child(31) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(31):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(31):hover ~ .wrap {

perspective-origin: 0 30%;

}

.sq:nth-child(32) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(32):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(32):hover ~ .wrap {

perspective-origin: 10% 30%;

}

.sq:nth-child(33) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(33):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(33):hover ~ .wrap {

perspective-origin: 20% 30%;

}

.sq:nth-child(34) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(34):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(34):hover ~ .wrap {

perspective-origin: 30% 30%;

}

.sq:nth-child(35) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(35):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(35):hover ~ .wrap {

perspective-origin: 40% 30%;

}

.sq:nth-child(36) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(36):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(36):hover ~ .wrap {

perspective-origin: 50% 30%;

}

.sq:nth-child(37) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(37):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(37):hover ~ .wrap {

perspective-origin: 60% 30%;

}

.sq:nth-child(38) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(38):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(38):hover ~ .wrap {

perspective-origin: 70% 30%;

}

.sq:nth-child(39) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(39):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(39):hover ~ .wrap {

perspective-origin: 80% 30%;

}

.sq:nth-child(40) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(40):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(40):hover ~ .wrap {

perspective-origin: 90% 30%;

}

.sq:nth-child(41) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(41):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(41):hover ~ .wrap {

perspective-origin: 0 40%;

}

.sq:nth-child(42) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(42):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(42):hover ~ .wrap {

perspective-origin: 10% 40%;

}

.sq:nth-child(43) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(43):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(43):hover ~ .wrap {

perspective-origin: 20% 40%;

}

.sq:nth-child(44) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(44):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(44):hover ~ .wrap {

perspective-origin: 30% 40%;

}

.sq:nth-child(45) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(45):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(45):hover ~ .wrap {

perspective-origin: 40% 40%;

}

.sq:nth-child(46) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(46):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(46):hover ~ .wrap {

perspective-origin: 50% 40%;

}

.sq:nth-child(47) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(47):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(47):hover ~ .wrap {

perspective-origin: 60% 40%;

}

.sq:nth-child(48) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(48):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(48):hover ~ .wrap {

perspective-origin: 70% 40%;

}

.sq:nth-child(49) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(49):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(49):hover ~ .wrap {

perspective-origin: 80% 40%;

}

.sq:nth-child(50) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(50):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(50):hover ~ .wrap {

perspective-origin: 90% 40%;

}

.sq:nth-child(51) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(51):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(51):hover ~ .wrap {

perspective-origin: 0 50%;

}

.sq:nth-child(52) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(52):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(52):hover ~ .wrap {

perspective-origin: 10% 50%;

}

.sq:nth-child(53) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(53):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(53):hover ~ .wrap {

perspective-origin: 20% 50%;

}

.sq:nth-child(54) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(54):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(54):hover ~ .wrap {

perspective-origin: 30% 50%;

}

.sq:nth-child(55) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(55):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(55):hover ~ .wrap {

perspective-origin: 40% 50%;

}

.sq:nth-child(56) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(56):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(56):hover ~ .wrap {

perspective-origin: 50% 50%;

}

.sq:nth-child(57) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(57):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(57):hover ~ .wrap {

perspective-origin: 60% 50%;

}

.sq:nth-child(58) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(58):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(58):hover ~ .wrap {

perspective-origin: 70% 50%;

}

.sq:nth-child(59) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(59):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(59):hover ~ .wrap {

perspective-origin: 80% 50%;

}

.sq:nth-child(60) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(60):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(60):hover ~ .wrap {

perspective-origin: 90% 50%;

}

.sq:nth-child(61) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(61):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(61):hover ~ .wrap {

perspective-origin: 0 60%;

}

.sq:nth-child(62) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(62):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(62):hover ~ .wrap {

perspective-origin: 10% 60%;

}

.sq:nth-child(63) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(63):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(63):hover ~ .wrap {

perspective-origin: 20% 60%;

}

.sq:nth-child(64) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(64):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(64):hover ~ .wrap {

perspective-origin: 30% 60%;

}

.sq:nth-child(65) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(65):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(65):hover ~ .wrap {

perspective-origin: 40% 60%;

}

.sq:nth-child(66) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(66):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(66):hover ~ .wrap {

perspective-origin: 50% 60%;

}

.sq:nth-child(67) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(67):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(67):hover ~ .wrap {

perspective-origin: 60% 60%;

}

.sq:nth-child(68) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(68):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(68):hover ~ .wrap {

perspective-origin: 70% 60%;

}

.sq:nth-child(69) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(69):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(69):hover ~ .wrap {

perspective-origin: 80% 60%;

}

.sq:nth-child(70) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(70):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(70):hover ~ .wrap {

perspective-origin: 90% 60%;

}

.sq:nth-child(71) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(71):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(71):hover ~ .wrap {

perspective-origin: 0 70%;

}

.sq:nth-child(72) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(72):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(72):hover ~ .wrap {

perspective-origin: 10% 70%;

}

.sq:nth-child(73) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(73):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(73):hover ~ .wrap {

perspective-origin: 20% 70%;

}

.sq:nth-child(74) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(74):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(74):hover ~ .wrap {

perspective-origin: 30% 70%;

}

.sq:nth-child(75) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(75):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(75):hover ~ .wrap {

perspective-origin: 40% 70%;

}

.sq:nth-child(76) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(76):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(76):hover ~ .wrap {

perspective-origin: 50% 70%;

}

.sq:nth-child(77) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(77):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(77):hover ~ .wrap {

perspective-origin: 60% 70%;

}

.sq:nth-child(78) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(78):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(78):hover ~ .wrap {

perspective-origin: 70% 70%;

}

.sq:nth-child(79) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(79):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(79):hover ~ .wrap {

perspective-origin: 80% 70%;

}

.sq:nth-child(80) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(80):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(80):hover ~ .wrap {

perspective-origin: 90% 70%;

}

.sq:nth-child(81) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(81):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(81):hover ~ .wrap {

perspective-origin: 0 80%;

}

.sq:nth-child(82) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(82):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(82):hover ~ .wrap {

perspective-origin: 10% 80%;

}

.sq:nth-child(83) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(83):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(83):hover ~ .wrap {

perspective-origin: 20% 80%;

}

.sq:nth-child(84) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(84):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(84):hover ~ .wrap {

perspective-origin: 30% 80%;

}

.sq:nth-child(85) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(85):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(85):hover ~ .wrap {

perspective-origin: 40% 80%;

}

.sq:nth-child(86) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(86):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(86):hover ~ .wrap {

perspective-origin: 50% 80%;

}

.sq:nth-child(87) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(87):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(87):hover ~ .wrap {

perspective-origin: 60% 80%;

}

.sq:nth-child(88) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(88):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(88):hover ~ .wrap {

perspective-origin: 70% 80%;

}

.sq:nth-child(89) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(89):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(89):hover ~ .wrap {

perspective-origin: 80% 80%;

}

.sq:nth-child(90) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(90):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(90):hover ~ .wrap {

perspective-origin: 90% 80%;

}

.sq:nth-child(91) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(91):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(91):hover ~ .wrap {

perspective-origin: 0 90%;

}

.sq:nth-child(92) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(92):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(92):hover ~ .wrap {

perspective-origin: 10% 90%;

}

.sq:nth-child(93) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(93):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(93):hover ~ .wrap {

perspective-origin: 20% 90%;

}

.sq:nth-child(94) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(94):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(94):hover ~ .wrap {

perspective-origin: 30% 90%;

}

.sq:nth-child(95) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(95):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(95):hover ~ .wrap {

perspective-origin: 40% 90%;

}

.sq:nth-child(96) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(96):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(96):hover ~ .wrap {

perspective-origin: 50% 90%;

}

.sq:nth-child(97) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(97):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(97):hover ~ .wrap {

perspective-origin: 60% 90%;

}

.sq:nth-child(98) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(98):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(98):hover ~ .wrap {

perspective-origin: 70% 90%;

}

.sq:nth-child(99) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(99):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(99):hover ~ .wrap {

perspective-origin: 80% 90%;

}

.sq:nth-child(100) {

border: 1px solid rgba(57, 250, 255, 0.015);

}

.sq:nth-child(100):hover {

border-color: rgba(57, 250, 255, 0.04);

}

.sq:nth-child(100):hover ~ .wrap {

perspective-origin: 90% 90%;

}

.c {

background: rgba(57, 250, 255, 0.8);

position: absolute;

top: 50%;

left: 50%;

border-radius: 50%;

}

.c:nth-child(1) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-841.11197px, 780.9466px, -274px);

}

.c:nth-child(2) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(111.80071px, -1091.34479px, -706px);

}

.c:nth-child(3) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(542.5462px, 111.37465px, -964px);

}

.c:nth-child(4) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-563.65065px, 586.72593px, -401px);

}

.c:nth-child(5) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(109.70825px, -1487.19907px, -880px);

}

.c:nth-child(6) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-222.31014px, 230.06108px, -139px);

}

.c:nth-child(7) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(302.45504px, 1100.08436px, -862px);

}

.c:nth-child(8) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-251.25987px, -352.21598px, -336px);

}

.c:nth-child(9) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-205.47668px, 413.0188px, -227px);

}

.c:nth-child(10) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(192.87677px, -589.3486px, -185px);

}

.c:nth-child(11) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(-919.27px, 132.1802px, -16px);

}

.c:nth-child(12) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-794.89761px, 305.29876px, -69px);

}

.c:nth-child(13) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-375.60126px, -870.70942px, -469px);

}

.c:nth-child(14) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(1567.76441px, -1606.66237px, -394px);

}

.c:nth-child(15) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-530.12188px, -8.48882px, -70px);

}

.c:nth-child(16) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(598.88428px, 194.33618px, -759px);

}

.c:nth-child(17) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-306.94801px, 229.64911px, -451px);

}

.c:nth-child(18) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(-551.69307px, -1701.10808px, -886px);

}

.c:nth-child(19) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(12.53231px, -303.93137px, -788px);

}

.c:nth-child(20) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-828.96723px, -354.58965px, -67px);

}

.c:nth-child(21) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(-444.90888px, 2.07708px, -509px);

}

.c:nth-child(22) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(298.96086px, -837.88621px, -37px);

}

.c:nth-child(23) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(302.85252px, -1693.18108px, -358px);

}

.c:nth-child(24) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(24.11722px, -896.60523px, -725px);

}

.c:nth-child(25) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-601.73421px, 1817.5945px, -989px);

}

.c:nth-child(26) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(878.51475px, 179.15817px, -960px);

}

.c:nth-child(27) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-38.56248px, 214.0521px, -878px);

}

.c:nth-child(28) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-94.00259px, -226.63205px, -821px);

}

.c:nth-child(29) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(129.01197px, -243.31828px, -510px);

}

.c:nth-child(30) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(7.72111px, -273.96484px, -308px);

}

.c:nth-child(31) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(85.85285px, -426.52219px, -384px);

}

.c:nth-child(32) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(15.75516px, 621.032px, -162px);

}

.c:nth-child(33) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(411.15364px, 101.35147px, -396px);

}

.c:nth-child(34) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-609.31265px, 208.60348px, -86px);

}

.c:nth-child(35) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-843.91964px, 154.00086px, -614px);

}

.c:nth-child(36) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(184.92679px, -13.89522px, -558px);

}

.c:nth-child(37) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-870.43017px, -339.9447px, -360px);

}

.c:nth-child(38) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-80.54611px, 284.41924px, -558px);

}

.c:nth-child(39) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(478.8489px, 69.07754px, -416px);

}

.c:nth-child(40) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-1297.66809px, -348.11718px, -878px);

}

.c:nth-child(41) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(79.19059px, -225.73411px, -994px);

}

.c:nth-child(42) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(484.66741px, -14.08677px, -951px);

}

.c:nth-child(43) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-658.29764px, 839.2175px, -868px);

}

.c:nth-child(44) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(24.18286px, -1439.82928px, -207px);

}

.c:nth-child(45) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(1076.20187px, 2.16418px, -83px);

}

.c:nth-child(46) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(-452.3031px, 1552.19051px, -35px);

}

.c:nth-child(47) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-389.57145px, -337.95927px, -559px);

}

.c:nth-child(48) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-1190.30881px, 382.25149px, -21px);

}

.c:nth-child(49) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-178.84757px, 527.4619px, -222px);

}

.c:nth-child(50) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(87.68234px, -585.51948px, -277px);

}

.c:nth-child(51) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-91.36251px, -531.61087px, -19px);

}

.c:nth-child(52) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-784.02984px, -458.45622px, -826px);

}

.c:nth-child(53) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(71.67694px, 413.67422px, -647px);

}

.c:nth-child(54) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-598.05589px, 692.13991px, -432px);

}

.c:nth-child(55) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(309.75987px, -1000.0308px, -42px);

}

.c:nth-child(56) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(10.35268px, 83.77203px, -334px);

}

.c:nth-child(57) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(262.91507px, 156.6211px, -464px);

}

.c:nth-child(58) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(275.83329px, 5.04958px, -378px);

}

.c:nth-child(59) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(65.95393px, -1176.59366px, -436px);

}

.c:nth-child(60) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-252.88364px, 663.94461px, -997px);

}

.c:nth-child(61) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-470.46509px, 604.53607px, -377px);

}

.c:nth-child(62) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-954.76821px, -548.88878px, -715px);

}

.c:nth-child(63) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(199.50061px, 297.65918px, -814px);

}

.c:nth-child(64) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-941.12553px, -228.63853px, -837px);

}

.c:nth-child(65) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(830.97241px, 127.62882px, -562px);

}

.c:nth-child(66) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-90.52613px, 890.9725px, -870px);

}

.c:nth-child(67) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-1604.38421px, 738.75379px, -321px);

}

.c:nth-child(68) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(398.21746px, 13.446px, -60px);

}

.c:nth-child(69) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(940.98627px, -664.65674px, -826px);

}

.c:nth-child(70) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(1322.48193px, 14.25922px, -397px);

}

.c:nth-child(71) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-234.47114px, -498.13336px, -189px);

}

.c:nth-child(72) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(170.52534px, 1050.47365px, -672px);

}

.c:nth-child(73) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-640.61989px, 1354.13703px, -296px);

}

.c:nth-child(74) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-324.9346px, -418.90892px, -876px);

}

.c:nth-child(75) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-141.09397px, -183.17729px, -677px);

}

.c:nth-child(76) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(593.14832px, -436.39114px, -279px);

}

.c:nth-child(77) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-272.96402px, -329.82114px, -251px);

}

.c:nth-child(78) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-87.05614px, 1348.16778px, -97px);

}

.c:nth-child(79) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(40.37192px, -463.67178px, -541px);

}

.c:nth-child(80) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-17.95424px, -103.0765px, -637px);

}

.c:nth-child(81) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-1473.15364px, -313.89165px, -535px);

}

.c:nth-child(82) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(12.13992px, 1070.17279px, -923px);

}

.c:nth-child(83) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(69.15007px, 1216.64636px, -613px);

}

.c:nth-child(84) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(994.43628px, 81.57048px, -818px);

}

.c:nth-child(85) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(786.48955px, -113.47121px, -448px);

}

.c:nth-child(86) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-366.35871px, -50.73866px, -207px);

}

.c:nth-child(87) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(72.10356px, 63.86173px, -281px);

}

.c:nth-child(88) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(1845.90687px, 1380.49609px, -81px);

}

.c:nth-child(89) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(349.48227px, -98.86549px, -547px);

}

.c:nth-child(90) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(272.97559px, 1156.12474px, -451px);

}

.c:nth-child(91) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-355.44231px, 1924.62556px, -298px);

}

.c:nth-child(92) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(874.71866px, -1645.24309px, -522px);

}

.c:nth-child(93) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(27.33288px, -169.99944px, -219px);

}

.c:nth-child(94) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-137.42066px, -366.40543px, -826px);

}

.c:nth-child(95) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(385.2752px, -31.80975px, -324px);

}

.c:nth-child(96) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(6.21181px, 14.14333px, -892px);

}

.c:nth-child(97) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(164.1704px, 649.99343px, -436px);

}

.c:nth-child(98) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-164.32339px, 1630.78023px, -381px);

}

.c:nth-child(99) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(62.25806px, -22.56091px, -350px);

}

.c:nth-child(100) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(939.73882px, -1751.49466px, -127px);

}

.c:nth-child(101) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(-625.85432px, 1320.1292px, -932px);

}

.c:nth-child(102) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(412.02083px, -36.76561px, -124px);

}

.c:nth-child(103) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(1647.60535px, 431.06265px, -377px);

}

.c:nth-child(104) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(386.74873px, 276.32965px, -31px);

}

.c:nth-child(105) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-4.24362px, 5.84497px, -322px);

}

.c:nth-child(106) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-557.35113px, -153.09184px, -625px);

}

.c:nth-child(107) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(1422.19392px, -692.62126px, -85px);

}

.c:nth-child(108) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-61.88447px, 179.46824px, -158px);

}

.c:nth-child(109) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-1625.58017px, 45.117px, -50px);

}

.c:nth-child(110) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-619.08563px, -189.97171px, -614px);

}

.c:nth-child(111) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-1235.74673px, 93.23314px, -629px);

}

.c:nth-child(112) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(429.04466px, -0.80299px, -130px);

}

.c:nth-child(113) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(685.4247px, 11.93433px, -359px);

}

.c:nth-child(114) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(-902.34433px, 161.17606px, -418px);

}

.c:nth-child(115) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-1417.48245px, -122.28572px, -867px);

}

.c:nth-child(116) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(650.43916px, 572.4713px, -517px);

}

.c:nth-child(117) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-555.95453px, 537.71006px, -405px);

}

.c:nth-child(118) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-153.62099px, 708.75652px, -873px);

}

.c:nth-child(119) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(997.92862px, -507.49569px, -452px);

}

.c:nth-child(120) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(324.34711px, 882.88437px, -164px);

}

.c:nth-child(121) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(523.08873px, 234.29228px, -555px);

}

.c:nth-child(122) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(429.93611px, 946.47503px, -87px);

}

.c:nth-child(123) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-1020.65156px, -604.70426px, -629px);

}

.c:nth-child(124) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-925.6506px, 422.73796px, -880px);

}

.c:nth-child(125) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-1736.93134px, 0.24523px, -326px);

}

.c:nth-child(126) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(168.48775px, 964.23624px, -976px);

}

.c:nth-child(127) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-520.27137px, 277.68483px, -366px);

}

.c:nth-child(128) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(843.39579px, 492.69662px, -180px);

}

.c:nth-child(129) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(150.27857px, 144.91413px, -867px);

}

.c:nth-child(130) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(1353.6412px, 264.89458px, -309px);

}

.c:nth-child(131) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-640.68173px, -83.65183px, -446px);

}

.c:nth-child(132) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(155.25566px, -86.75664px, -724px);

}

.c:nth-child(133) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(370.87418px, -530.58042px, -257px);

}

.c:nth-child(134) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(103.98362px, 1105.66257px, -91px);

}

.c:nth-child(135) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-378.06119px, -104.34117px, -699px);

}

.c:nth-child(136) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(1140.23651px, 139.57252px, -163px);

}

.c:nth-child(137) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-10.98087px, -208.95161px, -322px);

}

.c:nth-child(138) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(350.14846px, -188.39779px, -214px);

}

.c:nth-child(139) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-330.18298px, 60.12636px, -891px);

}

.c:nth-child(140) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(35.92321px, -840.81034px, -413px);

}

.c:nth-child(141) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(130.25053px, -251.22668px, -444px);

}

.c:nth-child(142) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(1605.54578px, 265.71598px, -43px);

}

.c:nth-child(143) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(151.41443px, -670.44534px, -605px);

}

.c:nth-child(144) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(8.76189px, 825.11582px, -431px);

}

.c:nth-child(145) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(515.3977px, -299.8869px, -131px);

}

.c:nth-child(146) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(136.42262px, 1001.1469px, -368px);

}

.c:nth-child(147) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(12.63153px, 616.19557px, -876px);

}

.c:nth-child(148) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-1380.41428px, -604.41659px, -845px);

}

.c:nth-child(149) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-42.49961px, -143.12146px, -156px);

}

.c:nth-child(150) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-153.63746px, 1277.37916px, -224px);

}

.c:nth-child(151) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-760.64238px, 246.69371px, -996px);

}

.c:nth-child(152) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-303.1005px, -1112.38891px, -35px);

}

.c:nth-child(153) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(135.85857px, -662.7344px, -667px);

}

.c:nth-child(154) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(318.23247px, -556.97053px, -342px);

}

.c:nth-child(155) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(500.93351px, 339.23233px, -604px);

}

.c:nth-child(156) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(508.10432px, 103.4672px, -481px);

}

.c:nth-child(157) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-791.66602px, 1390.21798px, -388px);

}

.c:nth-child(158) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(260.06539px, 580.02655px, -445px);

}

.c:nth-child(159) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(878.62768px, -1.06193px, -644px);

}

.c:nth-child(160) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-72.11928px, -521.5563px, -850px);

}

.c:nth-child(161) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-66.35228px, 526.1868px, -51px);

}

.c:nth-child(162) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-589.44239px, 249.15483px, -339px);

}

.c:nth-child(163) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-392.27371px, 480.55117px, -118px);

}

.c:nth-child(164) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-993.8017px, 1021.97799px, -519px);

}

.c:nth-child(165) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(650.01695px, -1322.26166px, -129px);

}

.c:nth-child(166) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-493.5328px, 375.63458px, -957px);

}

.c:nth-child(167) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(248.61327px, 960.39453px, -683px);

}

.c:nth-child(168) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-79.73618px, -551.78023px, -490px);

}

.c:nth-child(169) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-951.16628px, 704.66054px, -357px);

}

.c:nth-child(170) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(15.14644px, -22.92476px, -17px);

}

.c:nth-child(171) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(-85.38884px, 609.79812px, -574px);

}

.c:nth-child(172) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(466.66186px, -389.46832px, -641px);

}

.c:nth-child(173) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-414.02428px, -815.31594px, -340px);

}

.c:nth-child(174) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(557.61688px, 1289.39352px, -397px);

}

.c:nth-child(175) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-907.51215px, -378.99962px, -821px);

}

.c:nth-child(176) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(-384.77533px, -50.29671px, -40px);

}

.c:nth-child(177) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-41.16911px, -56.19041px, -391px);

}

.c:nth-child(178) {

height: 5px;

width: 5px;

margin-top: -2.5px;

margin-left: -2.5px;

transform: translate3d(32.71092px, -239.04694px, -634px);

}

.c:nth-child(179) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(129.08801px, -517.21623px, -947px);

}

.c:nth-child(180) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-13.64617px, -1412.60118px, -590px);

}

.c:nth-child(181) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-28.54297px, 29.63588px, -202px);

}

.c:nth-child(182) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(-601.67397px, -4.23119px, -390px);

}

.c:nth-child(183) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-1026.67853px, 709.60555px, -240px);

}

.c:nth-child(184) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(-303.02007px, 696.57874px, -679px);

}

.c:nth-child(185) {

height: 9px;

width: 9px;

margin-top: -4.5px;

margin-left: -4.5px;

transform: translate3d(1759.84207px, -1080.61565px, -674px);

}

.c:nth-child(186) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(536.54618px, 19.72689px, -54px);

}

.c:nth-child(187) {

height: 8px;

width: 8px;

margin-top: -4px;

margin-left: -4px;

transform: translate3d(295.60062px, 725.03468px, -687px);

}

.c:nth-child(188) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(1080.4689px, 722.69668px, -177px);

}

.c:nth-child(189) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(25.24798px, -183.40412px, -257px);

}

.c:nth-child(190) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(163.4263px, -718.55062px, -684px);

}

.c:nth-child(191) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(-225.9924px, 20.37244px, -121px);

}

.c:nth-child(192) {

height: 10px;

width: 10px;

margin-top: -5px;

margin-left: -5px;

transform: translate3d(665.00394px, 100.23392px, -889px);

}

.c:nth-child(193) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(557.95837px, 255.6348px, -950px);

}

.c:nth-child(194) {

height: 6px;

width: 6px;

margin-top: -3px;

margin-left: -3px;

transform: translate3d(-638.1886px, -998.08129px, -815px);

}

.c:nth-child(195) {

height: 11px;

width: 11px;

margin-top: -5.5px;

margin-left: -5.5px;

transform: translate3d(-1396.05736px, -184.64932px, -563px);

}

.c:nth-child(196) {

height: 14px;

width: 14px;

margin-top: -7px;

margin-left: -7px;

transform: translate3d(138.47207px, 1672.6588px, -661px);

}

.c:nth-child(197) {

height: 7px;

width: 7px;

margin-top: -3.5px;

margin-left: -3.5px;

transform: translate3d(-588.76651px, -1.3927px, -536px);

}

.c:nth-child(198) {

height: 12px;

width: 12px;

margin-top: -6px;

margin-left: -6px;

transform: translate3d(301.91286px, -88.01505px, -204px);

}

.c:nth-child(199) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(10.94539px, 189.04298px, -538px);

}

.c:nth-child(200) {

height: 13px;

width: 13px;

margin-top: -6.5px;

margin-left: -6.5px;

transform: translate3d(-445.63726px, -214.91157px, -539px);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值