div+css实现圆圈折叠形成花朵旋转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现圆圈折叠形成花朵旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>

html,
body {
  width: 100%;
  height: 100%;
}
body {
  background: #092745;
  overflow: hidden;
  font-size: 0;
}
div.container {
  position: relative;
  top: 50%;
  left: 50%;
}
div.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
div.circle0 {
  background-color: #188ced;
  left: 200px;
  top: 0px;
  -webkit-animation: moving-anim0 800ms ease-in-out 0ms infinite alternate;
          animation: moving-anim0 800ms ease-in-out 0ms infinite alternate;
}
div.circle1 {
  background-color: #90a0f5;
  left: 199.969539px;
  top: 3.4904812px;
  -webkit-animation: moving-anim1 800ms ease-in-out 40ms infinite alternate;
          animation: moving-anim1 800ms ease-in-out 40ms infinite alternate;
}
div.circle2 {
  background-color: #c134cd;
  left: 199.8781654px;
  top: 6.979899400000001px;
  -webkit-animation: moving-anim2 800ms ease-in-out 80ms infinite alternate;
          animation: moving-anim2 800ms ease-in-out 80ms infinite alternate;
}
div.circle3 {
  background-color: #a42dff;
  left: 199.72590699999998px;
  top: 10.4671912px;
  -webkit-animation: moving-anim3 800ms ease-in-out 120ms infinite alternate;
          animation: moving-anim3 800ms ease-in-out 120ms infinite alternate;
}
div.circle4 {
  background-color: #d8e6f2;
  left: 199.51281px;
  top: 13.9512948px;
  -webkit-animation: moving-anim4 800ms ease-in-out 160ms infinite alternate;
          animation: moving-anim4 800ms ease-in-out 160ms infinite alternate;
}
div.circle5 {
  background-color: #af3bfd;
  left: 199.2389396px;
  top: 17.4311486px;
  -webkit-animation: moving-anim5 800ms ease-in-out 200ms infinite alternate;
          animation: moving-anim5 800ms ease-in-out 200ms infinite alternate;
}
div.circle6 {
  background-color: #c96cd2;
  left: 198.904379px;
  top: 20.905692600000002px;
  -webkit-animation: moving-anim6 800ms ease-in-out 240ms infinite alternate;
          animation: moving-anim6 800ms ease-in-out 240ms infinite alternate;
}
div.circle7 {
  background-color: #47e7dc;
  left: 198.50923039999998px;
  top: 24.3738686px;
  -webkit-animation: moving-anim7 800ms ease-in-out 280ms infinite alternate;
          animation: moving-anim7 800ms ease-in-out 280ms infinite alternate;
}
div.circle8 {
  background-color: #c1c6f6;
  left: 198.0536138px;
  top: 27.8346202px;
  -webkit-animation: moving-anim8 800ms ease-in-out 320ms infinite alternate;
          animation: moving-anim8 800ms ease-in-out 320ms infinite alternate;
}
div.circle9 {
  background-color: #4ca1e1;
  left: 197.5376682px;
  top: 31.286893px;
  -webkit-animation: moving-anim9 800ms ease-in-out 360ms infinite alternate;
          animation: moving-anim9 800ms ease-in-out 360ms infinite alternate;
}
div.circle10 {
  background-color: #7151f2;
  left: 196.9615506px;
  top: 34.729635599999995px;
  -webkit-animation: moving-anim10 800ms ease-in-out 400ms infinite alternate;
          animation: moving-anim10 800ms ease-in-out 400ms infinite alternate;
}
div.circle11 {
  background-color: #219aff;
  left: 196.3254366px;
  top: 38.161799px;
  -webkit-animation: moving-anim11 800ms ease-in-out 440ms infinite alternate;
          animation: moving-anim11 800ms ease-in-out 440ms infinite alternate;
}
div.circle12 {
  background-color: #d84ed3;
  left: 195.6295202px;
  top: 41.5823382px;
  -webkit-animation: moving-anim12 800ms ease-in-out 480ms infinite alternate;
          animation: moving-anim12 800ms ease-in-out 480ms infinite alternate;
}
div.circle13 {
  background-color: #4c0de0;
  left: 194.874013px;
  top: 44.9902108px;
  -webkit-animation: moving-anim13 800ms ease-in-out 520ms infinite alternate;
          animation: moving-anim13 800ms ease-in-out 520ms infinite alternate;
}
div.circle14 {
  background-color: #d5c1ce;
  left: 194.05914520000002px;
  top: 48.3843792px;
  -webkit-animation: moving-anim14 800ms ease-in-out 560ms infinite alternate;
          animation: moving-anim14 800ms ease-in-out 560ms infinite alternate;
}
div.circle15 {
  background-color: #20d6e8;
  left: 193.1851652px;
  top: 51.763809px;
  -webkit-animation: moving-anim15 800ms ease-in-out 600ms infinite alternate;
          animation: moving-anim15 800ms ease-in-out 600ms infinite alternate;
}
div.circle16 {
  background-color: #3c44fe;
  left: 192.2523392px;
  top: 55.1274712px;
  -webkit-animation: moving-anim16 800ms ease-in-out 640ms infinite alternate;
          animation: moving-anim16 800ms ease-in-out 640ms infinite alternate;
}
div.circle17 {
  background-color: #65eff8;
  left: 191.2609512px;
  top: 58.474340999999995px;
  -webkit-animation: moving-anim17 800ms ease-in-out 680ms infinite alternate;
          animation: moving-anim17 800ms ease-in-out 680ms infinite alternate;
}
div.circle18 {
  background-color: #d282e7;
  left: 190.2113032px;
  top: 61.8033988px;
  -webkit-animation: moving-anim18 800ms ease-in-out 720ms infinite alternate;
          animation: moving-anim18 800ms ease-in-out 720ms infinite alternate;
}
div.circle19 {
  background-color: #3447de;
  left: 189.1037152px;
  top: 65.1136308px;
  -webkit-animation: moving-anim19 800ms ease-in-out 760ms infinite alternate;
          animation: moving-anim19 800ms ease-in-out 760ms infinite alternate;
}
div.circle20 {
  background-color: #4465da;
  left: 187.9385242px;
  top: 68.4040286px;
  -webkit-animation: moving-anim20 800ms ease-in-out 800ms infinite alternate;
          animation: moving-anim20 800ms ease-in-out 800ms infinite alternate;
}
div.circle21 {
  background-color: #9c54ed;
  left: 186.7160852px;
  top: 71.67359px;
  -webkit-animation: moving-anim21 800ms ease-in-out 840ms infinite alternate;
          animation: moving-anim21 800ms ease-in-out 840ms infinite alternate;
}
div.circle22 {
  background-color: #4fcbfb;
  left: 185.436771px;
  top: 74.92131859999999px;
  -webkit-animation: moving-anim22 800ms ease-in-out 880ms infinite alternate;
          animation: moving-anim22 800ms ease-in-out 880ms infinite alternate;
}
div.circle23 {
  background-color: #b7e6f3;
  left: 184.10097059999998px;
  top: 78.1462256px;
  -webkit-animation: moving-anim23 800ms ease-in-out 920ms infinite alternate;
          animation: moving-anim23 800ms ease-in-out 920ms infinite alternate;
}
div.circle24 {
  background-color: #c2cbfe;
  left: 182.7090916px;
  top: 81.3473286px;
  -webkit-animation: moving-anim24 800ms ease-in-out 960ms infinite alternate;
          animation: moving-anim24 800ms ease-in-out 960ms infinite alternate;
}
div.circle25 {
  background-color: #8567c8;
  left: 181.26155740000002px;
  top: 84.5236524px;
  -webkit-animation: moving-anim25 800ms ease-in-out 1000ms infinite alternate;
          animation: moving-anim25 800ms ease-in-out 1000ms infinite alternate;
}
div.circle26 {
  background-color: #c107fc;
  left: 179.7588092px;
  top: 87.6742294px;
  -webkit-animation: moving-anim26 800ms ease-in-out 1040ms infinite alternate;
          animation: moving-anim26 800ms ease-in-out 1040ms infinite alternate;
}
div.circle27 {
  background-color: #fd16f4;
  left: 178.2013048px;
  top: 90.7981px;
  -webkit-animation: moving-anim27 800ms ease-in-out 1080ms infinite alternate;
          animation: moving-anim27 800ms ease-in-out 1080ms infinite alternate;
}
div.circle28 {
  background-color: #6c4bd6;
  left: 176.58951860000002px;
  top: 93.89431259999999px;
  -webkit-animation: moving-anim28 800ms ease-in-out 1120ms infinite alternate;
          animation: moving-anim28 800ms ease-in-out 1120ms infinite alternate;
}
div.circle29 {
  background-color: #8002cd;
  left: 174.92394140000002px;
  top: 96.961924px;
  -webkit-animation: moving-anim29 800ms ease-in-out 1160ms infinite alternate;
          animation: moving-anim29 800ms ease-in-out 1160ms infinite alternate;
}
div.circle30 {
  background-color: #30d4cd;
  left: 173.20508080000002px;
  top: 100px;
  -webkit-animation: moving-anim30 800ms ease-in-out 1200ms infinite alternate;
          animation: moving-anim30 800ms ease-in-out 1200ms infinite alternate;
}
div.circle31 {
  background-color: #a58df3;
  left: 171.4334602px;
  top: 103.007615px;
  -webkit-animation: moving-anim31 800ms ease-in-out 1240ms infinite alternate;
          animation: moving-anim31 800ms ease-in-out 1240ms infinite alternate;
}
div.circle32 {
  background-color: #14e0e4;
  left: 169.6096192px;
  top: 105.9838528px;
  -webkit-animation: moving-anim32 800ms ease-in-out 1280ms infinite alternate;
          animation: moving-anim32 800ms ease-in-out 1280ms infinite alternate;
}
div.circle33 {
  background-color: #3de1f8;
  left: 167.7341136px;
  top: 108.927807px;
  -webkit-animation: moving-anim33 800ms ease-in-out 1320ms infinite alternate;
          animation: moving-anim33 800ms ease-in-out 1320ms infinite alternate;
}
div.circle34 {
  background-color: #63edcc;
  left: 165.80751460000002px;
  top: 111.8385806px;
  -webkit-animation: moving-anim34 800ms ease-in-out 1360ms infinite alternate;
          animation: moving-anim34 800ms ease-in-out 1360ms infinite alternate;
}
div.circle35 {
  background-color: #e921f0;
  left: 163.8304088px;
  top: 114.71528719999999px;
  -webkit-animation: moving-anim35 800ms ease-in-out 1400ms infinite alternate;
          animation: moving-anim35 800ms ease-in-out 1400ms infinite alternate;
}
div.circle36 {
  background-color: #ece5df;
  left: 161.8033988px;
  top: 117.5570504px;
  -webkit-animation: moving-anim36 800ms ease-in-out 1440ms infinite alternate;
          animation: moving-anim36 800ms ease-in-out 1440ms infinite alternate;
}
div.circle37 {
  background-color: #b5c8f5;
  left: 159.727102px;
  top: 120.3630046px;
  -webkit-animation: moving-anim37 800ms ease-in-out 1480ms infinite alternate;
          animation: moving-anim37 800ms ease-in-out 1480ms infinite alternate;
}
div.circle38 {
  background-color: #cab8fc;
  left: 157.6021508px;
  top: 123.132295px;
  -webkit-animation: moving-anim38 800ms ease-in-out 1520ms infinite alternate;
          animation: moving-anim38 800ms ease-in-out 1520ms infinite alternate;
}
div.circle39 {
  background-color: #01fdf3;
  left: 155.4291922px;
  top: 125.86407820000001px;
  -webkit-animation: moving-anim39 800ms ease-in-out 1560ms infinite alternate;
          animation: moving-anim39 800ms ease-in-out 1560ms infinite alternate;
}
div.circle40 {
  background-color: #91c3ce;
  left: 153.2088886px;
  top: 128.55752199999998px;
  -webkit-animation: moving-anim40 800ms ease-in-out 1600ms infinite alternate;
          animation: moving-anim40 800ms ease-in-out 1600ms infinite alternate;
}
div.circle41 {
  background-color: #b82bd5;
  left: 150.941916px;
  top: 131.2118058px;
  -webkit-animation: moving-anim41 800ms ease-in-out 1640ms infinite alternate;
          animation: moving-anim41 800ms ease-in-out 1640ms infinite alternate;
}
div.circle42 {
  background-color: #f072df;
  left: 148.628965px;
  top: 133.8261212px;
  -webkit-animation: moving-anim42 800ms ease-in-out 1680ms infinite alternate;
          animation: moving-anim42 800ms ease-in-out 1680ms infinite alternate;
}
div.circle43 {
  background-color: #b73ad3;
  left: 146.27074040000002px;
  top: 136.399672px;
  -webkit-animation: moving-anim43 800ms ease-in-out 1720ms infinite alternate;
          animation: moving-anim43 800ms ease-in-out 1720ms infinite alternate;
}
div.circle44 {
  background-color: #458ad5;
  left: 143.86795999999998px;
  top: 138.931674px;
  -webkit-animation: moving-anim44 800ms ease-in-out 1760ms infinite alternate;
          animation: moving-anim44 800ms ease-in-out 1760ms infinite alternate;
}
div.circle45 {
  background-color: #a67fda;
  left: 141.4213562px;
  top: 141.4213562px;
  -webkit-animation: moving-anim45 800ms ease-in-out 1800ms infinite alternate;
          animation: moving-anim45 800ms ease-in-out 1800ms infinite alternate;
}
div.circle46 {
  background-color: #0e50e9;
  left: 138.931674px;
  top: 143.86795999999998px;
  -webkit-animation: moving-anim46 800ms ease-in-out 1840ms infinite alternate;
          animation: moving-anim46 800ms ease-in-out 1840ms infinite alternate;
}
div.circle47 {
  background-color: #435de0;
  left: 136.399672px;
  top: 146.27074040000002px;
  -webkit-animation: moving-anim47 800ms ease-in-out 1880ms infinite alternate;
          animation: moving-anim47 800ms ease-in-out 1880ms infinite alternate;
}
div.circle48 {
  background-color: #4984d7;
  left: 133.8261212px;
  top: 148.628965px;
  -webkit-animation: moving-anim48 800ms ease-in-out 1920ms infinite alternate;
          animation: moving-anim48 800ms ease-in-out 1920ms infinite alternate;
}
div.circle49 {
  background-color: #86bfe4;
  left: 131.2118058px;
  top: 150.941916px;
  -webkit-animation: moving-anim49 800ms ease-in-out 1960ms infinite alternate;
          animation: moving-anim49 800ms ease-in-out 1960ms infinite alternate;
}
div.circle50 {
  background-color: #f16bdd;
  left: 128.55752199999998px;
  top: 153.2088886px;
  -webkit-animation: moving-anim50 800ms ease-in-out 2000ms infinite alternate;
          animation: moving-anim50 800ms ease-in-out 2000ms infinite alternate;
}
div.circle51 {
  background-color: #8d8bf3;
  left: 125.86407820000001px;
  top: 155.4291922px;
  -webkit-animation: moving-anim51 800ms ease-in-out 2040ms infinite alternate;
          animation: moving-anim51 800ms ease-in-out 2040ms infinite alternate;
}
div.circle52 {
  background-color: #01c2f9;
  left: 123.132295px;
  top: 157.6021508px;
  -webkit-animation: moving-anim52 800ms ease-in-out 2080ms infinite alternate;
          animation: moving-anim52 800ms ease-in-out 2080ms infinite alternate;
}
div.circle53 {
  background-color: #8256fa;
  left: 120.3630046px;
  top: 159.727102px;
  -webkit-animation: moving-anim53 800ms ease-in-out 2120ms infinite alternate;
          animation: moving-anim53 800ms ease-in-out 2120ms infinite alternate;
}
div.circle54 {
  background-color: #fe8afa;
  left: 117.5570504px;
  top: 161.8033988px;
  -webkit-animation: moving-anim54 800ms ease-in-out 2160ms infinite alternate;
          animation: moving-anim54 800ms ease-in-out 2160ms infinite alternate;
}
div.circle55 {
  background-color: #3743f9;
  left: 114.71528719999999px;
  top: 163.8304088px;
  -webkit-animation: moving-anim55 800ms ease-in-out 2200ms infinite alternate;
          animation: moving-anim55 800ms ease-in-out 2200ms infinite alternate;
}
div.circle56 {
  background-color: #9137ce;
  left: 111.8385806px;
  top: 165.80751460000002px;
  -webkit-animation: moving-anim56 800ms ease-in-out 2240ms infinite alternate;
          animation: moving-anim56 800ms ease-in-out 2240ms infinite alternate;
}
div.circle57 {
  background-color: #73b4ec;
  left: 108.927807px;
  top: 167.7341136px;
  -webkit-animation: moving-anim57 800ms ease-in-out 2280ms infinite alternate;
          animation: moving-anim57 800ms ease-in-out 2280ms infinite alternate;
}
div.circle58 {
  background-color: #5f6ee4;
  left: 105.9838528px;
  top: 169.6096192px;
  -webkit-animation: moving-anim58 800ms ease-in-out 2320ms infinite alternate;
          animation: moving-anim58 800ms ease-in-out 2320ms infinite alternate;
}
div.circle59 {
  background-color: #34caca;
  left: 103.007615px;
  top: 171.4334602px;
  -webkit-animation: moving-anim59 800ms ease-in-out 2360ms infinite alternate;
          animation: moving-anim59 800ms ease-in-out 2360ms infinite alternate;
}
div.circle60 {
  background-color: #e9e5ce;
  left: 100px;
  top: 173.20508080000002px;
  -webkit-animation: moving-anim60 800ms ease-in-out 2400ms infinite alternate;
          animation: moving-anim60 800ms ease-in-out 2400ms infinite alternate;
}
div.circle61 {
  background-color: #7ae9fc;
  left: 96.961924px;
  top: 174.92394140000002px;
  -webkit-animation: moving-anim61 800ms ease-in-out 2440ms infinite alternate;
          animation: moving-anim61 800ms ease-in-out 2440ms infinite alternate;
}
div.circle62 {
  background-color: #8080d7;
  left: 93.89431259999999px;
  top: 176.58951860000002px;
  -webkit-animation: moving-anim62 800ms ease-in-out 2480ms infinite alternate;
          animation: moving-anim62 800ms ease-in-out 2480ms infinite alternate;
}
div.circle63 {
  background-color: #ba81da;
  left: 90.7981px;
  top: 178.2013048px;
  -webkit-animation: moving-anim63 800ms ease-in-out 2520ms infinite alternate;
          animation: moving-anim63 800ms ease-in-out 2520ms infinite alternate;
}
div.circle64 {
  background-color: #72b0ee;
  left: 87.6742294px;
  top: 179.7588092px;
  -webkit-animation: moving-anim64 800ms ease-in-out 2560ms infinite alternate;
          animation: moving-anim64 800ms ease-in-out 2560ms infinite alternate;
}
div.circle65 {
  background-color: #48e4c9;
  left: 84.5236524px;
  top: 181.26155740000002px;
  -webkit-animation: moving-anim65 800ms ease-in-out 2600ms infinite alternate;
          animation: moving-anim65 800ms ease-in-out 2600ms infinite alternate;
}
div.circle66 {
  background-color: #16c1fd;
  left: 81.3473286px;
  top: 182.7090916px;
  -webkit-animation: moving-anim66 800ms ease-in-out 2640ms infinite alternate;
          animation: moving-anim66 800ms ease-in-out 2640ms infinite alternate;
}
div.circle67 {
  background-color: #0b90e6;
  left: 78.1462256px;
  top: 184.10097059999998px;
  -webkit-animation: moving-anim67 800ms ease-in-out 2680ms infinite alternate;
          animation: moving-anim67 800ms ease-in-out 2680ms infinite alternate;
}
div.circle68 {
  background-color: #5af6d7;
  left: 74.92131859999999px;
  top: 185.436771px;
  -webkit-animation: moving-anim68 800ms ease-in-out 2720ms infinite alternate;
          animation: moving-anim68 800ms ease-in-out 2720ms infinite alternate;
}
div.circle69 {
  background-color: #311cda;
  left: 71.67359px;
  top: 186.7160852px;
  -webkit-animation: moving-anim69 800ms ease-in-out 2760ms infinite alternate;
          animation: moving-anim69 800ms ease-in-out 2760ms infinite alternate;
}
div.circle70 {
  background-color: #11c6e0;
  left: 68.4040286px;
  top: 187.9385242px;
  -webkit-animation: moving-anim70 800ms ease-in-out 2800ms infinite alternate;
          animation: moving-anim70 800ms ease-in-out 2800ms infinite alternate;
}
div.circle71 {
  background-color: #dfd1ea;
  left: 65.1136308px;
  top: 189.1037152px;
  -webkit-animation: moving-anim71 800ms ease-in-out 2840ms infinite alternate;
          animation: moving-anim71 800ms ease-in-out 2840ms infinite alternate;
}
div.circle72 {
  background-color: #4d6ee0;
  left: 61.8033988px;
  top: 190.2113032px;
  -webkit-animation: moving-anim72 800ms ease-in-out 2880ms infinite alternate;
          animation: moving-anim72 800ms ease-in-out 2880ms infinite alternate;
}
div.circle73 {
  background-color: #8b0dec;
  left: 58.474340999999995px;
  top: 191.2609512px;
  -webkit-animation: moving-anim73 800ms ease-in-out 2920ms infinite alternate;
          animation: moving-anim73 800ms ease-in-out 2920ms infinite alternate;
}
div.circle74 {
  background-color: #d539c8;
  left: 55.1274712px;
  top: 192.2523392px;
  -webkit-animation: moving-anim74 800ms ease-in-out 2960ms infinite alternate;
          animation: moving-anim74 800ms ease-in-out 2960ms infinite alternate;
}
div.circle75 {
  background-color: #f7b7fd;
  left: 51.763809px;
  top: 193.1851652px;
  -webkit-animation: moving-anim75 800ms ease-in-out 3000ms infinite alternate;
          animation: moving-anim75 800ms ease-in-out 3000ms infinite alternate;
}
div.circle76 {
  background-color: #5a26d8;
  left: 48.3843792px;
  top: 194.05914520000002px;
  -webkit-animation: moving-anim76 800ms ease-in-out 3040ms infinite alternate;
          animation: moving-anim76 800ms ease-in-out 3040ms infinite alternate;
}
div.circle77 {
  background-color: #9f9ff6;
  left: 44.9902108px;
  top: 194.874013px;
  -webkit-animation: moving-anim77 800ms ease-in-out 3080ms infinite alternate;
          animation: moving-anim77 800ms ease-in-out 3080ms infinite alternate;
}
div.circle78 {
  background-color: #2548f6;
  left: 41.5823382px;
  top: 195.6295202px;
  -webkit-animation: moving-anim78 800ms ease-in-out 3120ms infinite alternate;
          animation: moving-anim78 800ms ease-in-out 3120ms infinite alternate;
}
div.circle79 {
  background-color: #a372fe;
  left: 38.161799px;
  top: 196.3254366px;
  -webkit-animation: moving-anim79 800ms ease-in-out 3160ms infinite alternate;
          animation: moving-anim79 800ms ease-in-out 3160ms infinite alternate;
}
div.circle80 {
  background-color: #a087d2;
  left: 34.729635599999995px;
  top: 196.9615506px;
  -webkit-animation: moving-anim80 800ms ease-in-out 3200ms infinite alternate;
          animation: moving-anim80 800ms ease-in-out 3200ms infinite alternate;
}
div.circle81 {
  background-color: #7c59e6;
  left: 31.286893px;
  top: 197.5376682px;
  -webkit-animation: moving-anim81 800ms ease-in-out 3240ms infinite alternate;
          animation: moving-anim81 800ms ease-in-out 3240ms infinite alternate;
}
div.circle82 {
  background-color: #0223fe;
  left: 27.8346202px;
  top: 198.0536138px;
  -webkit-animation: moving-anim82 800ms ease-in-out 3280ms infinite alternate;
          animation: moving-anim82 800ms ease-in-out 3280ms infinite alternate;
}
div.circle83 {
  background-color: #d409d4;
  left: 24.3738686px;
  top: 198.50923039999998px;
  -webkit-animation: moving-anim83 800ms ease-in-out 3320ms infinite alternate;
          animation: moving-anim83 800ms ease-in-out 3320ms infinite alternate;
}
div.circle84 {
  background-color: #7624e6;
  left: 20.905692600000002px;
  top: 198.904379px;
  -webkit-animation: moving-anim84 800ms ease-in-out 3360ms infinite alternate;
          animation: moving-anim84 800ms ease-in-out 3360ms infinite alternate;
}
div.circle85 {
  background-color: #08efc8;
  left: 17.4311486px;
  top: 199.2389396px;
  -webkit-animation: moving-anim85 800ms ease-in-out 3400ms infinite alternate;
          animation: moving-anim85 800ms ease-in-out 3400ms infinite alternate;
}
div.circle86 {
  background-color: #e5bdc8;
  left: 13.9512948px;
  top: 199.51281px;
  -webkit-animation: moving-anim86 800ms ease-in-out 3440ms infinite alternate;
          animation: moving-anim86 800ms ease-in-out 3440ms infinite alternate;
}
div.circle87 {
  background-color: #fa13cd;
  left: 10.4671912px;
  top: 199.72590699999998px;
  -webkit-animation: moving-anim87 800ms ease-in-out 3480ms infinite alternate;
          animation: moving-anim87 800ms ease-in-out 3480ms infinite alternate;
}
div.circle88 {
  background-color: #1142e0;
  left: 6.979899400000001px;
  top: 199.8781654px;
  -webkit-animation: moving-anim88 800ms ease-in-out 3520ms infinite alternate;
          animation: moving-anim88 800ms ease-in-out 3520ms infinite alternate;
}
div.circle89 {
  background-color: #0c84fa;
  left: 3.4904812px;
  top: 199.969539px;
  -webkit-animation: moving-anim89 800ms ease-in-out 3560ms infinite alternate;
          animation: moving-anim89 800ms ease-in-out 3560ms infinite alternate;
}
div.circle90 {
  background-color: #739df2;
  left: 0px;
  top: 200px;
  -webkit-animation: moving-anim90 800ms ease-in-out 3600ms infinite alternate;
          animation: moving-anim90 800ms ease-in-out 3600ms infinite alternate;
}
div.circle91 {
  background-color: #b917ca;
  left: -3.4904812px;
  top: 199.969539px;
  -webkit-animation: moving-anim91 800ms ease-in-out 3640ms infinite alternate;
          animation: moving-anim91 800ms ease-in-out 3640ms infinite alternate;
}
div.circle92 {
  background-color: #5e5ef6;
  left: -6.979899400000001px;
  top: 199.8781654px;
  -webkit-animation: moving-anim92 800ms ease-in-out 3680ms infinite alternate;
          animation: moving-anim92 800ms ease-in-out 3680ms infinite alternate;
}
div.circle93 {
  background-color: #82e5e0;
  left: -10.4671912px;
  top: 199.72590699999998px;
  -webkit-animation: moving-anim93 800ms ease-in-out 3720ms infinite alternate;
          animation: moving-anim93 800ms ease-in-out 3720ms infinite alternate;
}
div.circle94 {
  background-color: #3929e2;
  left: -13.9512948px;
  top: 199.51281px;
  -webkit-animation: moving-anim94 800ms ease-in-out 3760ms infinite alternate;
          animation: moving-anim94 800ms ease-in-out 3760ms infinite alternate;
}
div.circle95 {
  background-color: #c91af0;
  left: -17.4311486px;
  top: 199.2389396px;
  -webkit-animation: moving-anim95 800ms ease-in-out 3800ms infinite alternate;
          animation: moving-anim95 800ms ease-in-out 3800ms infinite alternate;
}
div.circle96 {
  background-color: #ec5dc8;
  left: -20.905692600000002px;
  top: 198.904379px;
  -webkit-animation: moving-anim96 800ms ease-in-out 3840ms infinite alternate;
          animation: moving-anim96 800ms ease-in-out 3840ms infinite alternate;
}
div.circle97 {
  background-color: #770cdc;
  left: -24.3738686px;
  top: 198.50923039999998px;
  -webkit-animation: moving-anim97 800ms ease-in-out 3880ms infinite alternate;
          animation: moving-anim97 800ms ease-in-out 3880ms infinite alternate;
}
div.circle98 {
  background-color: #6a77e8;
  left: -27.8346202px;
  top: 198.0536138px;
  -webkit-animation: moving-anim98 800ms ease-in-out 3920ms infinite alternate;
          animation: moving-anim98 800ms ease-in-out 3920ms infinite alternate;
}
div.circle99 {
  background-color: #5c4ff9;
  left: -31.286893px;
  top: 197.5376682px;
  -webkit-animation: moving-anim99 800ms ease-in-out 3960ms infinite alternate;
          animation: moving-anim99 800ms ease-in-out 3960ms infinite alternate;
}
div.circle100 {
  background-color: #3000e7;
  left: -34.729635599999995px;
  top: 196.9615506px;
  -webkit-animation: moving-anim100 800ms ease-in-out 4000ms infinite alternate;
          animation: moving-anim100 800ms ease-in-out 4000ms infinite alternate;
}
div.circle101 {
  background-color: #3c4afd;
  left: -38.161799px;
  top: 196.3254366px;
  -webkit-animation: moving-anim101 800ms ease-in-out 4040ms infinite alternate;
          animation: moving-anim101 800ms ease-in-out 4040ms infinite alternate;
}
div.circle102 {
  background-color: #ce80e8;
  left: -41.5823382px;
  top: 195.6295202px;
  -webkit-animation: moving-anim102 800ms ease-in-out 4080ms infinite alternate;
          animation: moving-anim102 800ms ease-in-out 4080ms infinite alternate;
}
div.circle103 {
  background-color: #2096df;
  left: -44.9902108px;
  top: 194.874013px;
  -webkit-animation: moving-anim103 800ms ease-in-out 4120ms infinite alternate;
          animation: moving-anim103 800ms ease-in-out 4120ms infinite alternate;
}
div.circle104 {
  background-color: #3954fc;
  left: -48.3843792px;
  top: 194.05914520000002px;
  -webkit-animation: moving-anim104 800ms ease-in-out 4160ms infinite alternate;
          animation: moving-anim104 800ms ease-in-out 4160ms infinite alternate;
}
div.circle105 {
  background-color: #71e5ce;
  left: -51.763809px;
  top: 193.1851652px;
  -webkit-animation: moving-anim105 800ms ease-in-out 4200ms infinite alternate;
          animation: moving-anim105 800ms ease-in-out 4200ms infinite alternate;
}
div.circle106 {
  background-color: #38afe6;
  left: -55.1274712px;
  top: 192.2523392px;
  -webkit-animation: moving-anim106 800ms ease-in-out 4240ms infinite alternate;
          animation: moving-anim106 800ms ease-in-out 4240ms infinite alternate;
}
div.circle107 {
  background-color: #72c1fd;
  left: -58.474340999999995px;
  top: 191.2609512px;
  -webkit-animation: moving-anim107 800ms ease-in-out 4280ms infinite alternate;
          animation: moving-anim107 800ms ease-in-out 4280ms infinite alternate;
}
div.circle108 {
  background-color: #6280f7;
  left: -61.8033988px;
  top: 190.2113032px;
  -webkit-animation: moving-anim108 800ms ease-in-out 4320ms infinite alternate;
          animation: moving-anim108 800ms ease-in-out 4320ms infinite alternate;
}
div.circle109 {
  background-color: #4071e0;
  left: -65.1136308px;
  top: 189.1037152px;
  -webkit-animation: moving-anim109 800ms ease-in-out 4360ms infinite alternate;
          animation: moving-anim109 800ms ease-in-out 4360ms infinite alternate;
}
div.circle110 {
  background-color: #0a6ccc;
  left: -68.4040286px;
  top: 187.9385242px;
  -webkit-animation: moving-anim110 800ms ease-in-out 4400ms infinite alternate;
          animation: moving-anim110 800ms ease-in-out 4400ms infinite alternate;
}
div.circle111 {
  background-color: #87dee9;
  left: -71.67359px;
  top: 186.7160852px;
  -webkit-animation: moving-anim111 800ms ease-in-out 4440ms infinite alternate;
          animation: moving-anim111 800ms ease-in-out 4440ms infinite alternate;
}
div.circle112 {
  background-color: #c72ed6;
  left: -74.92131859999999px;
  top: 185.436771px;
  -webkit-animation: moving-anim112 800ms ease-in-out 4480ms infinite alternate;
          animation: moving-anim112 800ms ease-in-out 4480ms infinite alternate;
}
div.circle113 {
  background-color: #7a65f2;
  left: -78.1462256px;
  top: 184.10097059999998px;
  -webkit-animation: moving-anim113 800ms ease-in-out 4520ms infinite alternate;
          animation: moving-anim113 800ms ease-in-out 4520ms infinite alternate;
}
div.circle114 {
  background-color: #7846dd;
  left: -81.3473286px;
  top: 182.7090916px;
  -webkit-animation: moving-anim114 800ms ease-in-out 4560ms infinite alternate;
          animation: moving-anim114 800ms ease-in-out 4560ms infinite alternate;
}
div.circle115 {
  background-color: #df1ae3;
  left: -84.5236524px;
  top: 181.26155740000002px;
  -webkit-animation: moving-anim115 800ms ease-in-out 4600ms infinite alternate;
          animation: moving-anim115 800ms ease-in-out 4600ms infinite alternate;
}
div.circle116 {
  background-color: #32abd7;
  left: -87.6742294px;
  top: 179.7588092px;
  -webkit-animation: moving-anim116 800ms ease-in-out 4640ms infinite alternate;
          animation: moving-anim116 800ms ease-in-out 4640ms infinite alternate;
}
div.circle117 {
  background-color: #d4dcd6;
  left: -90.7981px;
  top: 178.2013048px;
  -webkit-animation: moving-anim117 800ms ease-in-out 4680ms infinite alternate;
          animation: moving-anim117 800ms ease-in-out 4680ms infinite alternate;
}
div.circle118 {
  background-color: #f40dd6;
  left: -93.89431259999999px;
  top: 176.58951860000002px;
  -webkit-animation: moving-anim118 800ms ease-in-out 4720ms infinite alternate;
          animation: moving-anim118 800ms ease-in-out 4720ms infinite alternate;
}
div.circle119 {
  background-color: #82a1ff;
  left: -96.961924px;
  top: 174.92394140000002px;
  -webkit-animation: moving-anim119 800ms ease-in-out 4760ms infinite alternate;
          animation: moving-anim119 800ms ease-in-out 4760ms infinite alternate;
}
div.circle120 {
  background-color: #003bcb;
  left: -100px;
  top: 173.20508080000002px;
  -webkit-animation: moving-anim120 800ms ease-in-out 4800ms infinite alternate;
          animation: moving-anim120 800ms ease-in-out 4800ms infinite alternate;
}
div.circle121 {
  background-color: #318ddb;
  left: -103.007.........完整代码请登录后点击上方下载按钮下载查看