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;
 .........完整代码请登录后点击上方下载按钮下载查看