css彩色点状波浪波纹动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css彩色点状波浪波纹动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.dots {
  display: grid;
  grid-template-columns: repeat(20, 24px);
  grid-template-rows: repeat(20, 24px);
  place-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: hsl(var(--hue), 90%, 70%);
  border-radius: 50%;
  -webkit-animation: dot 24s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
          animation: dot 24s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
}
@-webkit-keyframes dot {
  from {
    transform: rotate(0deg) translateX(24px);
  }
  to {
    transform: rotate(1440deg) translateX(24px);
  }
}
@keyframes dot {
  from {
    transform: rotate(0deg) translateX(24px);
  }
  to {
    transform: rotate(1440deg) translateX(24px);
  }
}
.dot:nth-child(1) {
  --hue: 192.9460973711;
}
.dot:nth-child(2) {
  --hue: 11.0299027535;
}
.dot:nth-child(3) {
  --hue: 93.7897042146;
}
.dot:nth-child(4) {
  --hue: 273.0656838681;
}
.dot:nth-child(5) {
  --hue: 211.987106356;
}
.dot:nth-child(6) {
  --hue: 6.9924443104;
}
.dot:nth-child(7) {
  --hue: 223.2418828706;
}
.dot:nth-child(8) {
  --hue: 10.6964875336;
}
.dot:nth-child(9) {
  --hue: 167.2682332457;
}
.dot:nth-child(10) {
  --hue: 199.9328269576;
}
.dot:nth-child(11) {
  --hue: 274.7611250115;
}
.dot:nth-child(12) {
  --hue: 46.1148964847;
}
.dot:nth-child(13) {
  --hue: 222.9176597256;
}
.dot:nth-child(14) {
  --hue: 118.8620810477;
}
.dot:nth-child(15) {
  --hue: 29.5313136929;
}
.dot:nth-child(16) {
  --hue: 31.1321277103;
}
.dot:nth-child(17) {
  --hue: 308.5284609435;
}
.dot:nth-child(18) {
  --hue: 62.5929627923;
}
.dot:nth-child(19) {
  --hue: 221.4420486182;
}
.dot:nth-child(20) {
  --hue: 269.6109703217;
}
.dot:nth-child(21) {
  --hue: 19.3255369867;
}
.dot:nth-child(22) {
  --hue: 294.7826917138;
}
.dot:nth-child(23) {
  --hue: 348.2813376879;
}
.dot:nth-child(24) {
  --hue: 104.9594519582;
}
.dot:nth-child(25) {
  --hue: 143.0894217844;
}
.dot:nth-child(26) {
  --hue: 265.1288818735;
}
.dot:nth-child(27) {
  --hue: 267.8354215724;
}
.dot:nth-child(28) {
  --hue: 342.4777234816;
}
.dot:nth-child(29) {
  --hue: 288.2718709664;
}
.dot:nth-child(30) {
  --hue: 119.5242649467;
}
.dot:nth-child(31) {
  --hue: 51.1500321412;
}
.dot:nth-child(32) {
  --hue: 248.318086309;
}
.dot:nth-child(33) {
  --hue: 24.445523116;
}
.dot:nth-child(34) {
  --hue: 60.716975465;
}
.dot:nth-child(35) {
  --hue: 194.7530762517;
}
.dot:nth-child(36) {
  --hue: 89.3129753101;
}
.dot:nth-child(37) {
  --hue: 94.6623260629;
}
.dot:nth-child(38) {
  --hue: 167.7679829083;
}
.dot:nth-child(39) {
  --hue: 308.6331816435;
}
.dot:nth-child(40) {
  --hue: 172.1708231923;
}
.dot:nth-child(41) {
  --hue: 242.8571031498;
}
.dot:nth-child(42) {
  --hue: 254.4536339409;
}
.dot:nth-child(43) {
  --hue: 277.032218538;
}
.dot:nth-child(44) {
  --hue: 95.430192676;
}
.dot:nth-child(45) {
  --hue: 173.6156921295;
}
.dot:nth-child(46) {
  --hue: 110.1632381861;
}
.dot:nth-child(47) {
  --hue: 357.4375794869;
}
.dot:nth-child(48) {
  --hue: 238.7018300455;
}
.dot:nth-child(49) {
  --hue: 116.5013879106;
}
.dot:nth-child(50) {
  --hue: 136.2044999601;
}
.dot:nth-child(51) {
  --hue: 260.0504435528;
}
.dot:nth-child(52) {
  --hue: 88.6718555808;
}
.dot:nth-child(53) {
  --hue: 252.6486533372;
}
.dot:nth-child(54) {
  --hue: 52.7614479869;
}
.dot:nth-child(55) {
  --hue: 202.5599547685;
}
.dot:nth-child(56) {
  --hue: 167.003200337;
}
.dot:nth-child(57) {
  --hue: 159.9151813099;
}
.dot:nth-child(58) {
  --hue: 218.9902363411;
}
.dot:nth-child(59) {
  --hue: 116.4532527005;
}
.dot:nth-child(60) {
  --hue: 124.9957331131;
}
.dot:nth-child(61) {
  --hue: 308.6502872657;
}
.dot:nth-child(62) {
  --hue: 102.4418029587;
}
.dot:nth-child(63) {
  --hue: 163.6976783972;
}
.dot:nth-child(64) {
  --hue: 310.7873661935;
}
.dot:nth-child(65) {
  --hue: 310.1908459678;
}
.dot:nth-child(66) {
  --hue: 195.7441109035;
}
.dot:nth-child(67) {
  --hue: 340.0245646268;
}
.dot:nth-child(68) {
  --hue: 303.6986655424;
}
.dot:nth-child(69) {
  --hue: 19.7399248566;
}
.dot:nth-child(70) {
  --hue: 252.8201983725;
}
.dot:nth-child(71) {
  --hue: 331.8327523913;
}
.dot:nth-child(72) {
  --hue: 244.0437316963;
}
.dot:nth-child(73) {
  --hue: 135.3166302924;
}
.dot:nth-child(74) {
  --hue: 136.9030375683;
}
.dot:nth-child(75) {
  --hue: 104.5221683795;
}
.dot:nth-child(76) {
  --hue: 322.8850823339;
}
.dot:nth-child(77) {
  --hue: 184.6567974203;
}
.dot:nth-child(78) {
  --hue: 146.2829556483;
}
.dot:nth-child(79) {
  --hue: 176.7327888479;
}
.dot:nth-child(80) {
  --hue: 299.6090187665;
}
.dot:nth-child(81) {
  --hue: 195.057148494;
}
.dot:nth-child(82) {
  --hue: 314.2293951648;
}
.dot:nth-child(83) {
  --hue: 155.7489995831;
}
.dot:nth-child(84) {
  --hue: 102.4680247775;
}
.dot:nth-child(85) {
  --hue: 102.112466932;
}
.dot:nth-child(86) {
  --hue: 253.8251703483;
}
.dot:nth-child(87) {
  --hue: 326.1780050375;
}
.dot:nth-child(88) {
  --hue: 60.2041441576;
}
.dot:nth-child(89) {
  --hue: 279.5203742534;
}
.dot:nth-child(90) {
  --hue: 314.9710510183;
}
.dot:nth-child(91) {
  --hue: 332.4722658952;
}
.dot:nth-child(92) {
  --hue: 7.1378973517;
}
.dot:nth-child(93) {
  --hue: 119.9591349947;
}
.dot:nth-child(94) {
  --hue: 190.8463928731;
}
.dot:nth-child(95) {
  --hue: 16.9149377805;
}
.dot:nth-child(96) {
  --hue: 354.6381046294;
}
.dot:nth-child(97) {
  --hue: 334.4817256424;
}
.dot:nth-child(98) {
  --hue: 174.2371455054;
}
.dot:nth-child(99) {
  --hue: 225.6917234409;
}
.dot:nth-child(100) {
  --hue: 252.550007558;
}
.dot:nth-child(101) {
  --hue: 85.129267125;
}
.dot:nth-child(102) {
  --hue: 323.0861436318;
}
.dot:nth-child(103) {
  --hue: 263.5802578591;
}
.dot:nth-child(104) {
  --hue: 57.281764711;
}
.dot:nth-child(105) {
  --hue: 353.8964835608;
}
.dot:nth-child(106) {
  --hue: 227.6746704199;
}
.dot:nth-child(107) {
  --hue: 181.8117080846;
}
.dot:nth-child(108) {
  --hue: 218.7934028768;
}
.dot:nth-child(109) {
  --hue: 215.035057259;
}
.dot:nth-child(110) {
  --hue: 19.7833364761;
}
.dot:nth-child(111) {
  --hue: 57.8349363238;
}
.dot:nth-child(112) {
  --hue: 242.7687343159;
}
.dot:nth-child(113) {
  --hue: 169.8192046562;
}
.dot:nth-child(114) {
  --hue: 115.9321771615;
}
.dot:nth-child(115) {
  --hue: 309.331630987;
}
.dot:nth-child(116) {
  --hue: 332.5392303121;
}
.dot:nth-child(117) {
  --hue: 177.6705364999;
}
.dot:nth-child(118) {
  --hue: 177.8558455429;
}
.dot:nth-child(119) {
  --hue: 296.2499224335;
}
.dot:nth-child(120) {
  --hue: 112.5374794805;
}
.dot:nth-child(121) {
  --hue: 38.906779677;
}
.dot:nth-child(122) {
  --hue: 241.5248682182;
}
.dot:nth-child(123) {
  --hue: 130.2814206832;
}
.dot:nth-child(124) {
  --hue: 123.0542826562;
}
.dot:nth-child(125) {
  --hue: 307.1606906657;
}
.dot:nth-child(126) {
  --hue: 217.7249799152;
}
.dot:nth-child(127) {
  --hue: 338.6237228774;
}
.dot:nth-child(128) {
  --hue: 78.3850269142;
}
.dot:nth-child(129) {
  --hue: 287.9158220319;
}
.dot:nth-child(130) {
  --hue: 340.0697531643;
}
.dot:nth-child(131) {
  --hue: 225.8632592378;
}
.dot:nth-child(132) {
  --hue: 308.1462324434;
}
.dot:nth-child(133) {
  --hue: 114.6378890867;
}
.dot:nth-child(134) {
  --hue: 348.2182737328;
}
.dot:nth-child(135) {
  --hue: 79.5391327418;
}
.dot:nth-child(136) {
  --hue: 3.9324800081;
}
.dot:nth-child(137) {
  --hue: 128.9468487156;
}
.dot:nth-child(138) {
  --hue: 66.9578042606;
}
.dot:nth-child(139) {
  --hue: 148.7980298387;
}
.dot:nth-child(140) {
  --hue: 326.7118526072;
}
.dot:nth-child(141) {
  --hue: 140.2084249653;
}
.dot:nth-child(142) {
  --hue: 35.4606610507;
}
.dot:nth-child(143) {
  --hue: 11.1077383266;
}
.dot:nth-child(144) {
  --hue: 175.3735785415;
}
.dot:nth-child(145) {
  --hue: 327.6913122267;
}
.dot:nth-child(146) {
  --hue: 204.6530177407;
}
.dot:nth-child(147) {
  --hue: 97.1803124218;
}
.dot:nth-child(148) {
  --hue: 66.1930530049;
}
.dot:nth-child(149) {
  --hue: 128.9959683492;
}
.dot:nth-child(150) {
  --hue: 23.8370989704;
}
.dot:nth-child(151) {
  --hue: 268.2258494485;
}
.dot:nth-child(152) {
  --hue: 335.0026230669;
}
.dot:nth-child(153) {
  --hue: 41.0587159944;
}
.dot:nth-child(154) {
  --hue: 63.4684164484;
}
.dot:nth-child(155) {
  --hue: 296.9272025112;
}
.dot:nth-child(156) {
  --hue: 211.433840574;
}
.dot:nth-child(157) {
  --hue: 4.024542822;
}
.dot:nth-child(158) {
  --hue: 348.6836015602;
}
.dot:nth-child(159) {
  --hue: 104.0982503672;
}
.dot:nth-child(160) {
  --hue: 206.4296284949;
}
.dot:nth-child(161) {
  --hue: 76.3935010794;
}
.dot:nth-child(162) {
  --hue: 351.1999250595;
}
.dot:nth-child(163) {
  --hue: 152.4387154784;
}
.dot:nth-child(164) {
  --hue: 162.9984093066;
}
.dot:nth-child(165) {
  --hue: 294.2951316407;
}
.dot:nth-child(166) {
  --hue: 245.989879967;
}
.dot:nth-child(167) {
  --hue: 325.5900869553;
}
.dot:nth-child(168) {
  --hue: 14.7302354038;
}
.dot:nth-child(169) {
  --hue: 337.9345747512;
}
.dot:nth-child(170) {
  --hue: 324.5739551501;
}
.dot:nth-child(171) {
  --hue: 273.8039631577;
}
.dot:nth-child(172) {
  --hue: 340.4743212659;
}
.dot:nth-child(173) {
  --hue: 205.5039778071;
}
.dot:nth-child(174) {
  --hue: 112.2057502794;
}
.dot:nth-child(175) {
  --hue: 352.8752733836;
}
.dot:nth-child(176) {
  --hue: 338.1529200278;
}
.dot:nth-child(177) {
  --hue: 87.1631151734;
}
.dot:nth-child(178) {
  --hue: 150.1842763042;
}
.dot:nth-child(179) {
  --hue: 0.1392286329;
}
.dot:nth-child(180) {
  --hue: 10.8314266839;
}
.dot:nth-child(181) {
  --hue: 140.2932022627;
}
.dot:nth-child(182) {
  --hue: 330.0424615906;
}
.dot:nth-child(183) {
  --hue: 123.2062604515;
}
.dot:nth-child(184) {
  --hue: 90.5809749625;
}
.dot:nth-child(185) {
  --hue: 55.8108138783;
}
.dot:nth-child(186) {
  --hue: 323.0070255669;
}
.dot:nth-child(187) {
  --hue: 297.9609453574;
}
.dot:nth-child(188) {
  --hue: 33.5182527391;
}
.dot:nth-child(189) {
  --hue: 129.3360087067;
}
.dot:nth-child(190) {
  --hue: 8.8157073833;
}
.dot:nth-child(191) {
  --hue: 52.8838226323;
}
.dot:nth-child(192) {
  --hue: 296.2624596104;
}
.dot:nth-child(193) {
  --hue: 237.8970382928;
}
.dot:nth-child(194) {
  --hue: 21.9863210621;
}
.dot:nth-child(195) {
  --hue: 297.9973048291;
}
.dot:nth-child(196) {
  --hue: 322.4718382502;
}
.dot:nth-child(197) {
  --hue: 316.0655056968;
}
.dot:nth-child(198) {
  --hue: 254.9743942842;
}
.dot:nth-child(199) {
  --hue: 354.6608343743;
}
.dot:nth-child(200) {
  --hue: 223.3279939312;
}
.dot:nth-child(201) {
  --hue: 224.2006910307;
}
.dot:nth-child(202) {
  --hue: 86.1618815583;
}
.dot:nth-child(203) {
  --hue: 48.9290100525;
}
.dot:nth-child(204) {
  --hue: 227.9969002058;
}
.dot:nth-child(205) {
  --hue: 284.1925319524;
}
.dot:nth-child(206) {
  --hue: 80.3974001613;
}
.dot:nth-child(207) {
  --hue: 185.0555295138;
}
.dot:nth-child(208) {
  --hue: 114.1419048337;
}
.dot:nth-child(209) {
  --hue: 303.3555143041;
}
.dot:nth-child(210) {
  --hue: 261.4230060206;
}
.dot:nth-child(211) {
  --hue: 305.1582206137;
}
.dot:nth-child(212) {
  --hue: 334.302596925;
}
.dot:nth-child(213) {
  --hue: 182.5783408296;
}
.dot:nth-child(214) {
  --hue: 304.8003862919;
}
.dot:nth-child(215) {
  --hue: 108.5501732044;
}
.dot:nth-child(216) {
  --hue: 196.1467273675;
}
.dot:nth-child(217) {
  --hue: 285.5718616262;
}
.dot:nth-child(218) {
  --hue: 196.1723730758;
}
.dot:nth-child(219) {
  --hue: 95.4673830984;
}
.dot:nth-child(220) {
  --hue: 251.7574328242;
}
.dot:nth-child(221) {
  --hue: 153.0257008175;
}
.dot:nth-child(222) {
  --hue: 89.2294926882;
}
.dot:nth-child(223) {
  --hue: 3.4871104938;
}
.dot:nth-child(224) {
  --hue: 336.0418122449;
}
.dot:nth-child(225) {
  --hue: 212.2260786004;
}
.dot:nth-child(226) {
  --hue: 155.8295454997;
}
.dot:nth-child(227) {
  --hue: 256.5268816346;
}
.dot:nth-child(228) {
  --hue: 201.0703064241;
}
.dot:nth-child(229) {
  --hue: 359.0911607268;
}
.dot:nth-child(230) {
  --hue: 12.3163268008;
}
.dot:nth-child(231) {
  --hue: 45.5470243462;
}
.dot:nth-child(232) {
  --hue: 162.2170867246;
}
.dot:nth-child(233) {
  --hue: 301.5662652868;
}
.dot:nth-child(234) {
  --hue: 125.9126834192;
}
.dot:nth-child(235) {
  --hue: 291.7215513788;
}
.dot:nth-child(236) {
  --hue: 155.8003414368;
}
.dot:nth-child(237) {
  --hue: 295.3036132507;
}
.dot:nth-child(238) {
  --hue: 19.4096817894;
}
.dot:nth-child(239) {
  --hue: 328.0311526797;
}
.dot:nth-child(240) {
  --hue: 151.5861973258;
}
.dot:nth-child(241) {
  --hue: 105.7538910452;
}
.dot:nth-child(242) {
  --hue: 171.6192959178;
}
.dot:nth-child(243) {
  --hue: 345.3842044636;
}
.dot:nth-child(244) {
  --hue: 110.9899334981;
}
.dot:nth-child(245) {
  --hue: 275.9319261251;
}
.dot:nth-child(246) {
  --hue: 274.3032057859;
}
.dot:nth-child(247) {
  --hue: 76.8301894147;
}
.dot:nth-child(248) {
  --hue: 20.3247159672;
}
.dot:nth-child(249) {
  --hue: 279.8896936614;
}
.dot:nth-child(250) {
  --hue: 37.3376223522;
}
.dot:nth-child(251) {
  --hue: 136.8921873037;
}
.dot:nth-child(252) {
  --hue: 46.5303475145;
}
.dot:nth-child(253) {
  --hue: 9.9989669452;
}
.dot:nth-child(254) {
  --hue: 77.5914248939;
}
.dot:nth-child(255) {
  --hue: 15.5756753988;
}
.dot:nth-child(256) {
  --hue: 156.2537059186;
}
.dot:nth-child(257) {
  --hue: 64.1337554573;
}
.dot:nth-child(258) {
  --hue: 105.5424467497;
}
.dot:nth-child(259) {
  --hue: 167.9705024771;
}
.dot:nth-child(260) {
  --hue: 26.176944027;
}
.dot:nth-child(261) {
  --hue: 95.6639467193;
}
.dot:nth-child(262) {
  --hue: 41.0827208288;
}
.dot:nth-child(263) {
  --hue: 3.1548667581;
}
.dot:nth-child(264) {
  --hue: 338.8742300614;
}
.dot:nth-child(265) {
  --hue: 248.6629131749;
}
.dot:nth-child(266) {
  --hue: 41.7386166419;
}
.dot:nth-child(267) {
  --hue: 273.353821306;
}
.dot:nth-child(268) {
  --hue: 319.3385740652;
}
.dot:nth-child(269) {
  --hue: 200.8480069837;
}
.dot:nth-child(270) {
  --hue: 103.5507600702;
}
.dot:nth-child(271) {
  --hue: 167.0274817558;
}
.dot:nth-child(272) {
  --hue: 349.1850624596;
}
.dot:nth-child(273) {
  --hue: 274.6270236737;
}
.dot:nth-child(274) {
  --hue: 320.6695448152;
}
.dot:nth-child(275) {
  --hue: 260.9501326645;
}
.dot:nth-child(276) {
  --hue: 250.3012646182;
}
.dot:nth-child(277) {
  --hue: 207.188441467;
}
.dot:nth-child(278) {
  --hue: 147.8524877031;
}
.dot:nth-child(279) {
  --hue: 90.8037745781;
}
.dot:nth-child(280) {
  --hue: 113.4517034146;
}
.dot:nth-child(281) {
  --hue: 218.5475665082;
}
.dot:nth-child(282) {
  --hue: 180.9627106339;
}
.dot:nth-child(283) {
  --hue: 157.3026617051;
}
.dot:nth-child(284) {
  --hue: 130.921311852;
}
.dot:nth-child(285) {
  --hue: 70.2777822142;
}
.dot:nth-child(286) {
  --hue: 6.5747713828;
}
.dot:nth-child(287) {
  --hue: 31.6300116874;
}
.dot:nth-child(288) {
  --hue: 78.8911445138;
}
.dot:nth-child(289) {
  --hue: 145.6989921628;
}
.dot:nth-child(290) {
  --hue: 75.0556504552;
}
.dot:nth-child(291) {
  --hue: 312.9458542375;
}
.dot:nth-child(292) {
  --hue: 331.6347832691;
}
.dot:nth-child(293) {
  --hue: 261.1549757752;
}
.dot:nth-child(294) {
  --hue: 30.4540351394;
}
.dot:nth-child(295) {
  --hue: 326.1315348324;
}
.dot:nth-child(296) {
  --hue: 233.9816061894;
}
.dot:nth-child(297) {
  --hue: 251.4417142461;
}
.dot:nth-child(298) {
  --hue: 200.1631705178;
}
.dot:nth-child(299) {
  --hue: 63.7919727789;
}
.dot:nth-child(300) {
  --hue: 356.9154573494;
}
.dot:nth-child(301) {
  --hue: 270.0929662333;
}
.dot:nth-child(302) {
  --hue: 207.9288505287;
}
.dot:nth-child(303) {
  --hue: 325.3210087124;
}
.dot:nth-child(304) {
  --hue: 344.2988460907;
}
.dot:nth-child(305) {
  --hue: 307.1556459661;
}
.dot:nth-child(306) {
  --hue: 141.5789737614;
}
.dot:nth-child(307) {
  --hue: 293.6822824917;
}
.dot:nth-child(308) {
  --hue: 298.0632311371;
}
.dot:nth-child(309) {
  --hue: 165.2932888813;
}
.dot:nth-child(310) {
  --hue: 47.63344073;
}
.dot:nth-child(311) {
  --hue: 24.3895571419;
}
.dot:nth-child(312) {
  --hue: 6.6827874969;
}
.dot:nth-child(313) {
  --hue: 16.138429339;
}
.dot:nth-child(314) {
  --hue: 23.7322512555;
}
.dot:nth-child(315) {
  --hue: 232.5450847827;
}
.dot:nth-child(316) {
  --hue: 20.5751549218;
}
.dot:nth-child(317) {
  --hue: 154.0295012159;
}
.dot:nth-child(318) {
  --hue: 109.7838901026;
}
.dot:nth-child(319) {
  --hue: 137.796199654;
}
.dot:nth-child(320) {
  --hue: 39.3214070607;
}
.dot:nth-child(321) {
  --hue: 304.0376629568;
}
.dot:nth-child(322) {
  --hue: 187.2778550629;
}
.dot:nth-child(323) {
  --hue: 302.9971031406;
}
.dot:nth-child(324) {
  --hue: 298.3034508914;
}
.dot:nth-child(325) {
  --hue: 8.3055417003;
}
.dot:nth-child(326) {
  --hue: 172.3974377246;
}
.dot:nth-child(327) {
  --hue: 213.5797799788;
}
.dot:nth-child(328) {
  --hue: 187.8625540374;
}
.dot:nth-child(329) {
  --hue: 32.9472407203;
}
.dot:nth-child(330) {
  --hue: 314.4623222719;
}
.dot:nth-child(331) {
  --hue: 49.7680677645;
}
.dot:nth-child(332) {
  --hue: 350.4789218776;
}
.dot:nth-child(333) {
  --hue: 170.0459793434;
}
.dot:nth-child(334) {
  --hue: 41.6090367095;
}
.dot:nth-child(335) {
  --hue: 290.1318088872;
}
.dot:nth-child(336) {
  --hue: 14.4928124776;
}
.dot:nth-child(337) {
  --hue: 73.1762387333;
}
.dot:nth-child(338) {
  --hue: 167.2717622695;
}
.dot:nth-child(339) {
  --hue: 339.2585587781;
}
.dot:nth-child(340) {
  --hue: 237.0139921668;
}
.dot:nth-child(341) {
  --hue: 147.4036990715;
}
.dot:nth-child(342) {
  --hue: 41.7840756467;
}
.dot:nth-child(343) {
  --hue: 215.7831747789;
}
.dot:nth-child(344) {
  --hue: 196.792168763;
}
.dot:nth-child(345) {
  --hue: 266.9715554995;
}
.dot:nth-child(346) {
  --hue: 12.603876945;
}
.dot:nth-child(347) {
  --hue: 274.0994993831;
}
.dot:nth-child(348) {
  --hue: 209.9412526276;
}
.dot:nth-child(349) {
  --hue: 172.6730823147;
}
.dot:nth-child(350) {
  --hue: 329.8990602464;
}
.dot:nth-child(351) {
  --hue: 135.7359082427;
}
.dot:nth-child(352) {
  --hue: 255.4161872296;
}
.dot:nth-child(353) {
  --hue: 52.8243842393;
}
.dot:nth-child(354) {
  --hue: 20.7141404405;
}
.dot:nth-child(355) {
  --hue: 215.292529643;
}
.dot:nth-child(356) {
  --hue: 192.7780347661;
}
.dot:nth-child(357) {
  --hue: 63.6938613973;
}
.dot:nth-child(358) {
  --hue: 221.1122217271;
}
.dot:nth-child(359) {
  --hue: 143.6264080873;
}
.dot:nth-child(360) {
  --hue: 281.1192961503;
}
.dot:nth-child(361) {
  --hue: 233.412294639;
}
.dot:nth-child(362) {
  --hue: 286.4877855635;
}
.dot:nth-child(363) {
  --hue: 291.0587853409;
}
.dot:nth-child(364) {
  --hue: 63.2103138774;
}
.dot:nth-child(365) {
  --hue: 168.1433941398;
}
.dot:nth-child(366) {
  --hue: 322.0306600266;
}
.dot:nth-child(367) {
  --hue: 96.4628670008;
}
.dot:nth-child(368) {
  --hue: 167.7733603997;
}
.dot:nth-child(369) {
  --hue: 149.9583643349;
}
.dot:nth-child(370) {
  --hue: 177.6297394195;
}
.dot:nth-child(371) {
  --hue: 327.1776277157;
}
.dot:nth-child(372) {
  --hue: 124.0161204115;
}
.dot:nth-child(373) {
  --hue: 100.1920200246;
}
.dot:nth-child(374) {
  --hue: 139.3248516452;
}
.dot:nth-child(375) {
  --hue: 279.7838485655;
}
.dot:nth-child(376) {
  --hue: 85.3849340826;
}
.dot:nth-child(377) {
  --hue: 353.9297539713;
}
.dot:nth-child(378) {
  --hue: 220.8967464163;
}
.dot:nth-child(379) {
  --hue: 114.8853914259;
}
.dot:nth-child(380) {
  --hue: 98.5427777842;
}
.dot:nth-child(381) {
  --hue: 277.7138842633;
}
.dot:nth-child(382) {
  --hue: 23.526208121;
}
.dot:nth-child(383) {
  --hue: 327.9887044314;
}
.dot:nth-child(384) {
  --hue: 271.3080221232;
}
.dot:nth-child(385) {
  --hue: 104.5022277504;
}
.dot:nth-child(386) {
  --hue: 220.8144931864;
}
.dot:nth-child(387) {
  --hue: 158.6735592273;
}
.dot:nth-child(388) {
  --hue: 152.01377864;
}
.dot:nth-child(389) {
  --hue: 203.4539584925;
}
.dot:nth-child(390) {
  --hue: 103.6218611881;
}
.dot:nth-child(391) {
  --hue: 355.1694152114;
}
.dot:nth-child(392) {
  --hue: 338.8660631766;
}
.dot:nth-child(393) {
  --hue: 156.6372194368;
}
.dot:nth-child(394) {
  --hue: 203.8309050009;
}
.dot:nth-child(395) {
  --hue: 93.286410989;
}
.dot:nth-child(396) {
  --hue: 147.6114121039;
}
.dot:nth-child(397) {
  --hue: 299.2083828846;
}
.dot:nth-child(398) {
  --hue: 87.2785312838;
}
.dot:nth-child(399) {
  --hue: 293.3980826684;
}
.dot:nth-child(400) {
  --hue: 115.2268718345;
}
.dot:nth-child(20n+1) {
  --delay1: 0s;
}
.dot:nth-child(n+1):nth-child(-n+20) {
  --delay2: 0s;
}
.dot:nth-child(20n+2) {
  --delay1: -0.3s;
}
.dot:nth-child(n+21):nth-chi.........完整代码请登录后点击上方下载按钮下载查看