js实现可拖拽正方体内粒子发光三维效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：js实现可拖拽正方体内粒子发光三维效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  box-sizing: border-box;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  -webkit-perspective: 200vmin;
          perspective: 200vmin;
  background: black;
}

@-webkit-keyframes bg-fall {
  0% {
    background-position-y: calc(var(--length));
  }
  100% {
    background-position-y: calc(var(--length) + var(--length) * 4);
  }
}

@keyframes bg-fall {
  0% {
    background-position-y: calc(var(--length));
  }
  100% {
    background-position-y: calc(var(--length) + var(--length) * 4);
  }
}
.box {
  --thickness: 0.3vmin;
  --size: 60vmin;
  --length: calc(var(--size) / 1.4142135624 + var(--thickness) / 1.4142135624);
  --speed: 3;
  --x: -0.4;
  --y: 0.1;
  --count: 200;
  width: var(--size);
  height: var(--size);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(calc(var(--y, 0) * -1turn)) rotateY(calc(var(--x, 0) * 1turn));
          transform: rotateX(calc(var(--y, 0) * -1turn)) rotateY(calc(var(--x, 0) * 1turn));
  pointer-events: none;
}
.box > div {
  position: absolute;
  width: 0;
  height: 0;
  left: calc(var(--size) / 2);
  top: calc(var(--size) / 2);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.box > div > div {
  position: absolute;
  top: calc(var(--length) / -2);
  left: calc(var(--thickness) / -2);
  width: var(--thickness);
  height: var(--length);
  -webkit-transform: rotateY(calc(var(--i, 0) * 90deg)) translateZ(calc(var(--size) / 2 + var(--thickness) / 2));
          transform: rotateY(calc(var(--i, 0) * 90deg)) translateZ(calc(var(--size) / 2 + var(--thickness) / 2));
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.box > div > div:nth-child(1) {
  --i: 1;
}
.box > div > div:nth-child(2) {
  --i: 2;
}
.box > div > div:nth-child(3) {
  --i: 3;
}
.box > div > div:nth-child(4) {
  --i: 4;
}
.box > div > div > div {
  position: absolute;
  width: var(--thickness);
  height: var(--length);
  background: repeat -webkit-gradient(linear, left top, left bottom, from(#b23434), color-stop(#b2b234), color-stop(#34b234), color-stop(#34b2b2), color-stop(#3434b2), color-stop(#b234b2), to(#b23434));
  background: repeat linear-gradient(to bottom, #b23434, #b2b234, #34b234, #34b2b2, #3434b2, #b234b2, #b23434);
  background-size: 100% calc(var(--length) * 2);
  -webkit-animation: bg-fall calc(var(--speed) * 1s) linear infinite;
          animation: bg-fall calc(var(--speed) * 1s) linear infinite;
}
.box > div > div > div:nth-child(1) {
  -webkit-transform: translateZ(calc(var(--thickness) / 2.01));
          transform: translateZ(calc(var(--thickness) / 2.01));
}
.box > div > div > div:nth-child(2) {
  -webkit-transform: rotateY(90deg) translateZ(calc(var(--thickness) / 2.01));
          transform: rotateY(90deg) translateZ(calc(var(--thickness) / 2.01));
}
.box > div > div > div:nth-child(3) {
  -webkit-transform: translateZ(calc(var(--thickness) / -2.01));
          transform: translateZ(calc(var(--thickness) / -2.01));
}
.box > div > div > div:nth-child(4) {
  -webkit-transform: rotateY(90deg) translateZ(calc(var(--thickness) / -2.01));
          transform: rotateY(90deg) translateZ(calc(var(--thickness) / -2.01));
}
.box .x {
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
}
.box .y {
  -webkit-transform: rotateZ(90deg) rotateY(45deg);
          transform: rotateZ(90deg) rotateY(45deg);
}
.box .z {
  -webkit-transform: rotateX(90deg) rotateY(45deg);
          transform: rotateX(90deg) rotateY(45deg);
}
.box .dot {
  width: calc(var(--size) / 150);
  height: calc(var(--size) / 150);
  background: repeat -webkit-gradient(linear, left top, left bottom, from(#ed5e5e), color-stop(#eded5e), color-stop(#5eed5e), color-stop(#5eeded), color-stop(#5e5eed), color-stop(#ed5eed), to(#ed5e5e));
  background: repeat linear-gradient(to bottom, #ed5e5e, #eded5e, #5eed5e, #5eeded, #5e5eed, #ed5eed, #ed5e5e);
  background-size: calc(var(--size) / 50) var(--length);
  -webkit-transform: translate3D(calc(var(--size) * var(--r1)), calc(var(--size) * var(--r2)), calc(var(--size) * var(--r3))) rotateY(calc(var(--x, 0) * -1turn)) rotateX(calc(var(--y, 0) * 1turn)) scale(calc(var(--i) / 100 + 0.66));
          transform: translate3D(calc(var(--size) * var(--r1)), calc(var(--size) * var(--r2)), calc(var(--size) * var(--r3))) rotateY(calc(var(--x, 0) * -1turn)) rotateX(calc(var(--y, 0) * 1turn)) scale(calc(var(--i) / 100 + 0.66));
  border-radius: 50%;
  -webkit-animation: bg-fall calc(var(--speed) * 1s) linear infinite;
          animation: bg-fall calc(var(--speed) * 1s) linear infinite;
  -webkit-animation-delay: calc(var(--speed) * -1s * (var(--i) / var(--count)));
          animation-delay: calc(var(--speed) * -1s * (var(--i) / var(--count)));
}
.box .dot:nth-child(1) {
  --i: 1;
  --r1: 0.24;
  --r2: 0.2117241379;
  --r3: 0.1103448276;
}
.box .dot:nth-child(2) {
  --i: 2;
  --r1: -0.0006896552;
  --r2: -0.0531034483;
  --r3: 0.0393103448;
}
.box .dot:nth-child(3) {
  --i: 3;
  --r1: -0.1513793103;
  --r2: -0.034137931;
  --r3: -0.134137931;
}
.box .dot:nth-child(4) {
  --i: 4;
  --r1: -0.0734482759;
  --r2: -0.1220689655;
  --r3: -0.0248275862;
}
.box .dot:nth-child(5) {
  --i: 5;
  --r1: 0.0779310345;
  --r2: 0.3389655172;
  --r3: -0.1617241379;
}
.box .dot:nth-child(6) {
  --i: 6;
  --r1: 0.0055172414;
  --r2: 0.0682758621;
  --r3: -0.3320689655;
}
.box .dot:nth-child(7) {
  --i: 7;
  --r1: -0.3427586207;
  --r2: 0.1637931034;
  --r3: -0.0010344828;
}
.box .dot:nth-child(8) {
  --i: 8;
  --r1: 0.0186206897;
  --r2: 0.3382758621;
  --r3: 0.2920689655;
}
.box .dot:nth-child(9) {
  --i: 9;
  --r1: -0.0168965517;
  --r2: 0.3179310345;
  --r3: -0.1172413793;
}
.box .dot:nth-child(10) {
  --i: 10;
  --r1: 0.2389655172;
  --r2: 0.3131034483;
  --r3: 0.245862069;
}
.box .dot:nth-child(11) {
  --i: 11;
  --r1: -0.0710344828;
  --r2: 0.1255172414;
  --r3: -0.0789655172;
}
.box .dot:nth-child(12) {
  --i: 12;
  --r1: -0.1865517241;
  --r2: 0.1096551724;
  --r3: 0.1282758621;
}
.box .dot:nth-child(13) {
  --i: 13;
  --r1: -0.085862069;
  --r2: -0.0631034483;
  --r3: -0.2710344828;
}
.box .dot:nth-child(14) {
  --i: 14;
  --r1: 0.2979310345;
  --r2: 0.2017241379;
  --r3: -0.2975862069;
}
.box .dot:nth-child(15) {
  --i: 15;
  --r1: -0.2175862069;
  --r2: 0.0196551724;
  --r3: 0.0413793103;
}
.box .dot:nth-child(16) {
  --i: 16;
  --r1: 0.2451724138;
  --r2: 0.045862069;
  --r3: 0.2403448276;
}
.box .dot:nth-child(17) {
  --i: 17;
  --r1: -0.3293103448;
  --r2: -0.0055172414;
  --r3: -0.3444827586;
}
.box .dot:nth-child(18) {
  --i: 18;
  --r1: -0.1544827586;
  --r2: -0.0906896552;
  --r3: 0.1934482759;
}
.box .dot:nth-child(19) {
  --i: 19;
  --r1: -0.2396551724;
  --r2: 0.0331034483;
  --r3: -0.1462068966;
}
.box .dot:nth-child(20) {
  --i: 20;
  --r1: 0.174137931;
  --r2: -0.0662068966;
  --r3: -0.1920689655;
}
.box .dot:nth-child(21) {
  --i: 21;
  --r1: 0.064137931;
  --r2: -0.2617241379;
  --r3: 0.2568965517;
}
.box .dot:nth-child(22) {
  --i: 22;
  --r1: 0.0517241379;
  --r2: -0.0382758621;
  --r3: 0.0113793103;
}
.box .dot:nth-child(23) {
  --i: 23;
  --r1: 0.03;
  --r2: 0.0934482759;
  --r3: -0.254137931;
}
.box .dot:nth-child(24) {
  --i: 24;
  --r1: 0.265862069;
  --r2: 0.275862069;
  --r3: -0.05;
}
.box .dot:nth-child(25) {
  --i: 25;
  --r1: 0.3;
  --r2: 0.304137931;
  --r3: 0.1427586207;
}
.box .dot:nth-child(26) {
  --i: 26;
  --r1: 0.1734482759;
  --r2: 0.2696551724;
  --r3: 0.0344827586;
}
.box .dot:nth-child(27) {
  --i: 27;
  --r1: -0.3082758621;
  --r2: 0.1589655172;
  --r3: 0.135862069;
}
.box .dot:nth-child(28) {
  --i: 28;
  --r1: -0.12;
  --r2: -0.2362068966;
  --r3: 0.3272413793;
}
.box .dot:nth-child(29) {
  --i: 29;
  --r1: 0.0872413793;
  --r2: 0.1017241379;
  --r3: -0.3220689655;
}
.box .dot:nth-child(30) {
  --i: 30;
  --r1: -0.1162068966;
  --r2: 0.1782758621;
  --r3: -0.0596551724;
}
.box .dot:nth-child(31) {
  --i: 31;
  --r1: 0.1375862069;
  --r2: 0.3024137931;
  --r3: 0.1482758621;
}
.box .dot:nth-child(32) {
  --i: 32;
  --r1: 0.09;
  --r2: -0.0396551724;
  --r3: 0.1006896552;
}
.box .dot:nth-child(33) {
  --i: 33;
  --r1: -0.2937931034;
  --r2: 0.3034482759;
  --r3: -0.0279310345;
}
.box .dot:nth-child(34) {
  --i: 34;
  --r1: -0.0579310345;
  --r2: 0.2893103448;
  --r3: 0.0706896552;
}
.box .dot:nth-child(35) {
  --i: 35;
  --r1: 0.0475862069;
  --r2: -0.1627586207;
  --r3: -0.085862069;
}
.box .dot:nth-child(36) {
  --i: 36;
  --r1: 0.2106896552;
  --r2: -0.1506896552;
  --r3: 0.1513793103;
}
.box .dot:nth-child(37) {
  --i: 37;
  --r1: 0.2624137931;
  --r2: -0.0355172414;
  --r3: 0.034137931;
}
.box .dot:nth-child(38) {
  --i: 38;
  --r1: -0.3131034483;
  --r2: -0.2868965517;
  --r3: -0.0762068966;
}
.box .dot:nth-child(39) {
  --i: 39;
  --r1: 0.2310344828;
  --r2: -0.3189655172;
  --r3: -0.0617241379;
}
.box .dot:nth-child(40) {
  --i: 40;
  --r1: 0.0406896552;
  --r2: 0.1975862069;
  --r3: 0.1993103448;
}
.box .dot:nth-child(41) {
  --i: 41;
  --r1: 0.1968965517;
  --r2: -0.2572413793;
  --r3: 0.1151724138;
}
.box .dot:nth-child(42) {
  --i: 42;
  --r1: -0.3265517241;
  --r2: -0.1351724138;
  --r3: -0.2865517241;
}
.box .dot:nth-child(43) {
  --i: 43;
  --r1: -0.1703448276;
  --r2: 0.0624137931;
  --r3: -0.105862069;
}
.box .dot:nth-child(44) {
  --i: 44;
  --r1: 0.0968965517;
  --r2: 0.1403448276;
  --r3: -0.1117241379;
}
.box .dot:nth-child(45) {
  --i: 45;
  --r1: 0.1903448276;
  --r2: 0.1920689655;
  --r3: -0.1427586207;
}
.box .dot:nth-child(46) {
  --i: 46;
  --r1: -0.2962068966;
  --r2: 0.1286206897;
  --r3: 0.3127586207;
}
.box .dot:nth-child(47) {
  --i: 47;
  --r1: 0.0775862069;
  --r2: 0.2731034483;
  --r3: -0.0855172414;
}
.box .dot:nth-child(48) {
  --i: 48;
  --r1: -0.1679310345;
  --r2: 0.2444827586;
  --r3: 0.2913793103;
}
.box .dot:nth-child(49) {
  --i: 49;
  --r1: -0.1389655172;
  --r2: -0.2365517241;
  --r3: -0.1937931034;
}
.box .dot:nth-child(50) {
  --i: 50;
  --r1: -0.1082758621;
  --r2: -0.295862069;
  --r3: -0.0589655172;
}
.box .dot:nth-child(51) {
  --i: 51;
  --r1: 0.2431034483;
  --r2: -0.0934482759;
  --r3: -0.1789655172;
}
.box .dot:nth-child(52) {
  --i: 52;
  --r1: -0.2227586207;
  --r2: -0.1496551724;
  --r3: -0.0120689655;
}
.box .dot:nth-child(53) {
  --i: 53;
  --r1: 0.2768965517;
  --r2: -0.1196551724;
  --r3: -0.2613793103;
}
.box .dot:nth-child(54) {
  --i: 54;
  --r1: 0.3331034483;
  --r2: -0.3062068966;
  --r3: 0.3082758621;
}
.box .dot:nth-child(55) {
  --i: 55;
  --r1: 0.1751724138;
  --r2: 0.2827586207;
  --r3: -0.13;
}
.box .dot:nth-child(56) {
  --i: 56;
  --r1: -0.0627586207;
  --r2: 0.0186206897;
  --r3: 0.3017241379;
}
.box .dot:nth-child(57) {
  --i: 57;
  --r1: 0.2134482759;
  --r2: 0.2631034483;
  --r3: -0.1848275862;
}
.box .dot:nth-child(58) {
  --i: 58;
  --r1: -0.3251724138;
  --r2: -0.0482758621;
  --r3: 0.2644827586;
}
.box .dot:nth-child(59) {
  --i: 59;
  --r1: -0.0893103448;
  --r2: -0.3117241379;
  --r3: 0.0327586207;
}
.box .dot:nth-child(60) {
  --i: 60;
  --r1: 0.2134482759;
  --r2: 0.2696551724;
  --r3: -0.1365517241;
}
.box .dot:nth-child(61) {
  --i: 61;
  --r1: 0.3;
  --r2: -0.325862069;
  --r3: 0.095862069;
}
.box .dot:nth-child(62) {
  --i: 62;
  --r1: 0.214137931;
  --r2: 0.2089655172;
  --r3: -0.0810344828;
}
.box .dot:nth-child(63) {
  --i: 63;
  --r1: -0.0368965517;
  --r2: -0.0668965517;
  --r3: -0.0317241379;
}
.box .dot:nth-child(64) {
  --i: 64;
  --r1: -0.2137931034;
  --r2: 0.1751724138;
  --r3: -0.3196551724;
}
.box .dot:nth-child(65) {
  --i: 65;
  --r1: 0.2010344828;
  --r2: 0.0544827586;
  --r3: -0.1620689655;
}
.box .dot:nth-child(66) {
  --i: 66;
  --r1: -0.17;
  --r2: 0.1655172414;
  --r3: 0.0144827586;
}
.box .dot:nth-child(67) {
  --i: 67;
  --r1: -0.3206896552;
  --r2: -0.244137931;
  --r3: 0.2668965517;
}
.box .dot:nth-child(68) {
  --i: 68;
  --r1: -0.2968965517;
  --r2: 0.1172413793;
  --r3: -0.17;
}
.box .dot:nth-child(69) {
  --i: 69;
  --r1: -0.0451724138;
  --r2: 0.295862069;
  --r3: -0.0879310345;
}
.box .dot:nth-child(70) {
  --i: 70;
  --r1: -0.2296551724;
  --r2: -0.1420689655;
  --r3: -0.1603448276;
}
.box .dot:nth-child(71) {
  --i: 71;
  --r1: -0.3410344828;
  --r2: -0.3172413793;
  --r3: 0.1248275862;
}
.box .dot:nth-child(72) {
  --i: 72;
  --r1: -0.1910344828;
  --r2: 0.2148275862;
  --r3: 0.0382758621;
}
.box .dot:nth-child(73) {
  --i: 73;
  --r1: -0.2975862069;
  --r2: -0.255862069;
  --r3: -0.0144827586;
}
.box .dot:nth-child(74) {
  --i: 74;
  --r1: 0.2110344828;
  --r2: -0.1027586207;
  --r3: -0.314137931;
}
.box .dot:nth-child(75) {
  --i: 75;
  --r1: 0.284137931;
  --r2: 0.3224137931;
  --r3: -0.3420689655;
}
.box .dot:nth-child(76) {
  --i: 76;
  --r1: 0.0910344828;
  --r2: -0.2006896552;
  --r3: -0.0420689655;
}
.box .dot:nth-child(77) {
  --i: 77;
  --r1: -0.0493103448;
  --r2: -0.0351724138;
  --r3: -0.0306896552;
}
.box .dot:nth-child(78) {
  --i: 78;
  --r1: 0.2875862069;
  --r2: 0.3155172414;
  --r3: 0.0862068966;
}
.box .dot:nth-child(79) {
  --i: 79;
  --r1: -0.3203448276;
  --r2: 0.0672413793;
  --r3: -0.1320689655;
}
.box .dot:nth-child(80) {
  --i: 80;
  --r1: -0.1320689655;
  --r2: -0.2324137931;
  --r3: -0.0596551724;
}
.box .dot:nth-child(81) {
  --i: 81;
  --r1: 0.0331034483;
  --r2: 0.0786206897;
  --r3: 0.2555172414;
}
.box .dot:nth-child(82) {
  --i: 82;
  --r1: 0.2534482759;
  --r2: 0.2627586207;
  --r3: -0.0965517241;
}
.box .dot:nth-child(83) {
  --i: 83;
  --r1: 0.1972413793;
  --r2: -0.0903448276;
  --r3: -0.0889655172;
}
.box .dot:nth-child(84) {
  --i: 84;
  --r1: -0.0175862069;
  --r2: -0.1810344828;
  --r3: -0.0862068966;
}
.box .dot:nth-child(85) {
  --i: 85;
  --r1: 0.2924137931;
  --r2: -0.1903448276;
  --r3: 0.1406896552;
}
.box .dot:nth-child(86) {
  --i: 86;
  --r1: 0.2810344828;
  --r2: 0.2631034483;
  --r3: -0.1820689655;
}
.box .dot:nth-child(87) {
  --i: 87;
  --r1: -0.2665517241;
  --r2: -0.3137931034;
  --r3: -0.0165517241;
}
.box .dot:nth-child(88) {
  --i: 88;
  --r1: -0.2775862069;
  --r2: 0.1403448276;
  --r3: 0.2282758621;
}
.box .dot:nth-child(89) {
  --i: 89;
  --r1: -0.2344827586;
  --r2: 0.175862069;
  --r3: 0.1875862069;
}
.box .dot:nth-child(90) {
  --i: 90;
  --r1: 0.1506896552;
  --r2: -0.1731034483;
  --r3: -0.1910344828;
}
.box .dot:nth-child(91) {
  --i: 91;
  --r1: 0.054137931;
  --r2: -0.2979310345;
  --r3: 0.1268965517;
}
.box .dot:nth-child(92) {
  --i: 92;
  --r1: 0.2086206897;
  --r2: -0.1744827586;
  --r3: 0.0824137931;
}
.box .dot:nth-child(93) {
  --i: 93;
  --r1: 0.0944827586;
  --r2: 0.1968965517;
  --r3: -0.2117241379;
}
.box .dot:nth-child(94) {
  --i: 94;
  --r1: -0.3279310345;
  --r2: 0.1206896552;
  --r3: -0.1972413793;
}
.box .dot:nth-child(95) {
  --i: 95;
  --r1: 0.2651724138;
  --r2: -0.1620689655;
  --r3: -0.2120689655;
}
.box .dot:nth-child(96) {
  --i: 96;
  --r1: -0.3220689655;
  --r2: -0.0427586207;
  --r3: -0.2127586207;
}
.box .dot:nth-child(97) {
  --i: 97;
  --r1: -0.0103448276;
  --r2: -0.0062068966;
  --r3: 0.0196551724;
}
.box .dot:nth-child(98) {
  --i: 98;
  --r1: 0.174137931;
  --r2: -0.3382758621;
  --r3: 0.1062068966;
}
.box .dot:nth-child(99) {
  --i: 99;
  --r1: -0.0748275862;
  --r2: -0.19;
  --r3: -0.0820689655;
}
.box .dot:nth-child(100) {
  --i: 100;
  --r1: 0.315862069;
  --r2: 0.2203448276;
  --r3: 0.0068965517;
}
.box .dot:nth-child(101) {
  --i: 101;
  --r1: -0.0882758621;
  --r2: -0.1031034483;
  --r3: -0.2613793103;
}
.box .dot:nth-child(102) {
  --i: 102;
  --r1: 0.0113793103;
  --r2: -0.3110344828;
  --r3: 0.1368965517;
}
.box .dot:nth-child(103) {
  --i: 103;
  --r1: -0.1713793103;
  --r2: 0.0006896552;
  --r3: -0.2882758621;
}
.box .dot:nth-child(104) {
  --i: 104;
  --r1: 0.2644827586;
  --r2: 0.0286206897;
  --r3: 0.2803448276;
}
.box .dot:nth-child(105) {
  --i: 105;
  --r1: -0.1331034483;
  --r2: 0.0962068966;
  --r3: -0.2455172414;
}
.box .dot:nth-child(106) {
  --i: 106;
  --r1: -0.0965517241;
  --r2: 0.0113793103;
  --r3: -0.2503448276;
}
.box .dot:nth-child(107) {
  --i: 107;
  --r1: 0.1703448276;
  --r2: -0.2482758621;
  --r3: -0.1737931034;
}
.box .dot:nth-child(108) {
  --i: 108;
  --r1: -0.2724137931;
  --r2: 0.1610344828;
  --r3: -0.1293103448;
}
.box .dot:nth-child(109) {
  --i: 109;
  --r1: -0.3068965517;
  --r2: 0.165862069;
  --r3: 0.0482758621;
}
.box .dot:nth-child(110) {
  --i: 110;
  --r1: 0.1531034483;
  --r2: 0.2944827586;
  --r3: -0.0475862069;
}
.box .dot:nth-child(111) {
  --i: 111;
  --r1: -0.3068965517;
  --r2: 0.2496551724;
  --r3: 0.2686206897;
}
.box .dot:nth-child(112) {
  --i: 112;
  --r1: 0.2524137931;
  --r2: 0.0868965517;
  --r3: -0.0896551724;
}
.box .dot:nth-child(113) {
  --i: 113;
  --r1: 0.06;
  --r2: -0.0986206897;
  --r3: -0.0993103448;
}
.box .dot:nth-child(114) {
  --i: 114;
  --r1: -0.2582758621;
  --r2: -0.2537931034;
  --r3: -0.2365517241;
}
.box .dot:nth-child(115) {
  --i: 115;
  --r1: 0.1320689655;
  --r2: -0.0465517241;
  --r3: 0.2010344828;
}
.box .dot:nth-child(116) {
  --i: 116;
  --r1: 0.2244827586;
  --r2: -0.2420689655;
  --r3: -0.255862069;
}
.box .dot:nth-child(117) {
  --i: 117;
  --r1: 0.1979310345;
  --r2: 0.1424137931;
  --r3: 0.3020689655;
}
.box .dot:nth-child(118) {
  --i: 118;
  --r1: 0.3031034483;
  --r2: 0.3082758621;
  --r3: 0.0437931034;
}
.box .dot:nth-child(119) {
  --i: 119;
  --r1: 0.0065517241;
  --r2: 0.2348275862;
  --r3: 0.25;
}
.box .dot:nth-child(120) {
  --i: 120;
  --r1: 0.33;
  --r2: -0.0265517241;
  --r3: -0.3403448276;
}
.box .dot:nth-child(121) {
  --i: 121;
  --r1: 0.195862069;
  --r2: 0.3448275862;
  --r3: 0.134137931;
}
.box .dot:nth-child(122) {
  --i: 122;
  --r1: 0.334137931;
  --r2: 0.2310344828;
  --r3: 0.305862069;
}
.box .dot:nth-child(123) {
  --i: 123;
  --r1: -0.1793103448;
  --r2: -0.1955172414;
  --r3: -0.2520689655;
}
.box .dot:nth-child(124) {
  --i: 124;
  --r1: 0.0737931034;
  --r2: -0.0772413793;
  --r3: 0.2482758621;
}
.box .dot:nth-child(125) {
  --i: 125;
  --r1: -0.1820689655;
  --r2: 0.2086206897;
  --r3: -0.2320689655;
}
.box .dot:nth-child(126) {
  --i: 126;
  --r1: 0.2234482759;
  --r2: -0.1175862069;
  --r3: 0.304137931;
}
.box .dot:nth-child(127) {
  --i: 127;
  --r1: -0.0682758621;
  --r2: -0.0793103448;
  --r3: -0.0693103448;
}
.box .dot:nth-child(128) {
  --i: 128;
  --r1: -0.1365517241;
  --r2: 0.2455172414;
  --r3: -0.0927586207;
}
.box .dot:nth-child(129) {
  --i: 129;
  --r1: -0.0568965517;
  --r2: 0.0844827586;
  --r3: 0.1710344828;
}
.box .dot:nth-child(130) {
  --i: 130;
  --r1: -0.1686206897;
  --r2: -0.2755172414;
  --r3: 0.0620689655;
}
.box .dot:nth-child(131) {
  --i: 131;
  --r1: -0.2665517241;
  --r2: -0.3065517241;
  --r3: 0.2055172414;
}
.box .dot:nth-child(132) {
  --i: 132;
  --r1: -0.2517241379;
  --r2: -0.1017241379;
  --r3: -0.2527586207;
}
.box .dot:nth-child(133) {
  --i: 133;
  --r1: -0.0827586207;
  --r2: -0.0803448276;
  --r3: -0.0806896552;
}
.box .dot:nth-child(134) {
  --i: 134;
  --r1: 0.3175862069;
  --r2: 0.1103448276;
  --r3: -0.1410344828;
}
.box .dot:nth-child(135) {
  --i: 135;
  --r1: -0.3189655172;
  --r2: 0.0751724138;
  --r3: -0.0820689655;
}
.box .dot:nth-child(136) {
  --i: 136;
  --r1: -0.2803448276;
  --r2: -0.2182758621;
  --r3: -0.0517241379;
}
.box .dot:nth-child(137) {
  --i: 137;
  --r1: -0.0517241379;
  --r2: 0.2048275862;
  --r3: 0.2396551724;
}
.box .dot:nth-child(138) {
  --i: 138;
  --r1: 0.2834482759;
  --r2: 0.3162068966;
  --r3: -0.1868965517;
}
.box .dot:nth-child(139) {
  --i: 139;
  --r1: 0.2848275862;
  --r2: 0.12;
  --r3: -0.1355172414;
}
.box .dot:nth-child(140) {
  --i: 140;
  --r1: -0.0048275862;
  --r2: -0.2096551724;
  --r3: -0.2065517241;
}
.box .dot:nth-child(141) {
  --i: 141;
  --r1: -0.3131034483;
  --r2: -0.0803448276;
  --r3: -0.3206896552;
}
.box .dot:nth-child(1.........完整代码请登录后点击上方下载按钮下载查看