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-image: radial-gradient(circle, #222, #000 320px);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
}
.container > div {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--ro, 0deg)) scale(0);
  box-shadow: 0px 0 10px #0007;
  -webkit-animation: move 10s infinite;
          animation: move 10s infinite;
}
.container > div:nth-child(1) {
  --ro: 211deg;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  background-image: radial-gradient(circle at top, #ef8f8f, #701010);
}
.container > div:nth-child(2) {
  --ro: 34deg;
  -webkit-animation-delay: 1.005s;
          animation-delay: 1.005s;
  background-image: radial-gradient(circle at top, #ef918f, #701110);
}
.container > div:nth-child(3) {
  --ro: 308deg;
  -webkit-animation-delay: 1.01s;
          animation-delay: 1.01s;
  background-image: radial-gradient(circle at top, #ef928f, #701310);
}
.container > div:nth-child(4) {
  --ro: 293deg;
  -webkit-animation-delay: 1.015s;
          animation-delay: 1.015s;
  background-image: radial-gradient(circle at top, #ef948f, #701410);
}
.container > div:nth-child(5) {
  --ro: 328deg;
  -webkit-animation-delay: 1.02s;
          animation-delay: 1.02s;
  background-image: radial-gradient(circle at top, #ef958f, #701610);
}
.container > div:nth-child(6) {
  --ro: 245deg;
  -webkit-animation-delay: 1.025s;
          animation-delay: 1.025s;
  background-image: radial-gradient(circle at top, #ef978f, #701710);
}
.container > div:nth-child(7) {
  --ro: 108deg;
  -webkit-animation-delay: 1.03s;
          animation-delay: 1.03s;
  background-image: radial-gradient(circle at top, #ef988f, #701910);
}
.container > div:nth-child(8) {
  --ro: 167deg;
  -webkit-animation-delay: 1.035s;
          animation-delay: 1.035s;
  background-image: radial-gradient(circle at top, #ef998f, #701a10);
}
.container > div:nth-child(9) {
  --ro: 168deg;
  -webkit-animation-delay: 1.04s;
          animation-delay: 1.04s;
  background-image: radial-gradient(circle at top, #ef9b8f, #701b10);
}
.container > div:nth-child(10) {
  --ro: 175deg;
  -webkit-animation-delay: 1.045s;
          animation-delay: 1.045s;
  background-image: radial-gradient(circle at top, #ef9c8f, #701d10);
}
.container > div:nth-child(11) {
  --ro: 273deg;
  -webkit-animation-delay: 1.05s;
          animation-delay: 1.05s;
  background-image: radial-gradient(circle at top, #ef9e8f, #701e10);
}
.container > div:nth-child(12) {
  --ro: 53deg;
  -webkit-animation-delay: 1.055s;
          animation-delay: 1.055s;
  background-image: radial-gradient(circle at top, #ef9f8f, #702010);
}
.container > div:nth-child(13) {
  --ro: 137deg;
  -webkit-animation-delay: 1.06s;
          animation-delay: 1.06s;
  background-image: radial-gradient(circle at top, #efa18f, #702110);
}
.container > div:nth-child(14) {
  --ro: 359deg;
  -webkit-animation-delay: 1.065s;
          animation-delay: 1.065s;
  background-image: radial-gradient(circle at top, #efa28f, #702310);
}
.container > div:nth-child(15) {
  --ro: 193deg;
  -webkit-animation-delay: 1.07s;
          animation-delay: 1.07s;
  background-image: radial-gradient(circle at top, #efa48f, #702410);
}
.container > div:nth-child(16) {
  --ro: 28deg;
  -webkit-animation-delay: 1.075s;
          animation-delay: 1.075s;
  background-image: radial-gradient(circle at top, #efa58f, #702510);
}
.container > div:nth-child(17) {
  --ro: 184deg;
  -webkit-animation-delay: 1.08s;
          animation-delay: 1.08s;
  background-image: radial-gradient(circle at top, #efa68f, #702710);
}
.container > div:nth-child(18) {
  --ro: 284deg;
  -webkit-animation-delay: 1.085s;
          animation-delay: 1.085s;
  background-image: radial-gradient(circle at top, #efa88f, #702810);
}
.container > div:nth-child(19) {
  --ro: 91deg;
  -webkit-animation-delay: 1.09s;
          animation-delay: 1.09s;
  background-image: radial-gradient(circle at top, #efa98f, #702a10);
}
.container > div:nth-child(20) {
  --ro: 333deg;
  -webkit-animation-delay: 1.095s;
          animation-delay: 1.095s;
  background-image: radial-gradient(circle at top, #efab8f, #702b10);
}
.container > div:nth-child(21) {
  --ro: 61deg;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
  background-image: radial-gradient(circle at top, #efac8f, #702d10);
}
.container > div:nth-child(22) {
  --ro: 199deg;
  -webkit-animation-delay: 1.105s;
          animation-delay: 1.105s;
  background-image: radial-gradient(circle at top, #efae8f, #702e10);
}
.container > div:nth-child(23) {
  --ro: 184deg;
  -webkit-animation-delay: 1.11s;
          animation-delay: 1.11s;
  background-image: radial-gradient(circle at top, #efaf8f, #702f10);
}
.container > div:nth-child(24) {
  --ro: 212deg;
  -webkit-animation-delay: 1.115s;
          animation-delay: 1.115s;
  background-image: radial-gradient(circle at top, #efb08f, #703110);
}
.container > div:nth-child(25) {
  --ro: 72deg;
  -webkit-animation-delay: 1.12s;
          animation-delay: 1.12s;
  background-image: radial-gradient(circle at top, #efb28f, #703210);
}
.container > div:nth-child(26) {
  --ro: 68deg;
  -webkit-animation-delay: 1.125s;
          animation-delay: 1.125s;
  background-image: radial-gradient(circle at top, #efb38f, #703410);
}
.container > div:nth-child(27) {
  --ro: 117deg;
  -webkit-animation-delay: 1.13s;
          animation-delay: 1.13s;
  background-image: radial-gradient(circle at top, #efb58f, #703510);
}
.container > div:nth-child(28) {
  --ro: 65deg;
  -webkit-animation-delay: 1.135s;
          animation-delay: 1.135s;
  background-image: radial-gradient(circle at top, #efb68f, #703710);
}
.container > div:nth-child(29) {
  --ro: 115deg;
  -webkit-animation-delay: 1.14s;
          animation-delay: 1.14s;
  background-image: radial-gradient(circle at top, #efb88f, #703810);
}
.container > div:nth-child(30) {
  --ro: 22deg;
  -webkit-animation-delay: 1.145s;
          animation-delay: 1.145s;
  background-image: radial-gradient(circle at top, #efb98f, #703a10);
}
.container > div:nth-child(31) {
  --ro: 118deg;
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
  background-image: radial-gradient(circle at top, #efba8f, #703b10);
}
.container > div:nth-child(32) {
  --ro: 321deg;
  -webkit-animation-delay: 1.155s;
          animation-delay: 1.155s;
  background-image: radial-gradient(circle at top, #efbc8f, #703c10);
}
.container > div:nth-child(33) {
  --ro: 151deg;
  -webkit-animation-delay: 1.16s;
          animation-delay: 1.16s;
  background-image: radial-gradient(circle at top, #efbd8f, #703e10);
}
.container > div:nth-child(34) {
  --ro: 106deg;
  -webkit-animation-delay: 1.165s;
          animation-delay: 1.165s;
  background-image: radial-gradient(circle at top, #efbf8f, #703f10);
}
.container > div:nth-child(35) {
  --ro: 345deg;
  -webkit-animation-delay: 1.17s;
          animation-delay: 1.17s;
  background-image: radial-gradient(circle at top, #efc08f, #704110);
}
.container > div:nth-child(36) {
  --ro: 125deg;
  -webkit-animation-delay: 1.175s;
          animation-delay: 1.175s;
  background-image: radial-gradient(circle at top, #efc28f, #704210);
}
.container > div:nth-child(37) {
  --ro: 52deg;
  -webkit-animation-delay: 1.18s;
          animation-delay: 1.18s;
  background-image: radial-gradient(circle at top, #efc38f, #704410);
}
.container > div:nth-child(38) {
  --ro: 189deg;
  -webkit-animation-delay: 1.185s;
          animation-delay: 1.185s;
  background-image: radial-gradient(circle at top, #efc58f, #704510);
}
.container > div:nth-child(39) {
  --ro: 342deg;
  -webkit-animation-delay: 1.19s;
          animation-delay: 1.19s;
  background-image: radial-gradient(circle at top, #efc68f, #704610);
}
.container > div:nth-child(40) {
  --ro: 118deg;
  -webkit-animation-delay: 1.195s;
          animation-delay: 1.195s;
  background-image: radial-gradient(circle at top, #efc78f, #704810);
}
.container > div:nth-child(41) {
  --ro: 21deg;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  background-image: radial-gradient(circle at top, #efc98f, #704910);
}
.container > div:nth-child(42) {
  --ro: 330deg;
  -webkit-animation-delay: 1.205s;
          animation-delay: 1.205s;
  background-image: radial-gradient(circle at top, #efca8f, #704b10);
}
.container > div:nth-child(43) {
  --ro: 272deg;
  -webkit-animation-delay: 1.21s;
          animation-delay: 1.21s;
  background-image: radial-gradient(circle at top, #efcc8f, #704c10);
}
.container > div:nth-child(44) {
  --ro: 263deg;
  -webkit-animation-delay: 1.215s;
          animation-delay: 1.215s;
  background-image: radial-gradient(circle at top, #efcd8f, #704e10);
}
.container > div:nth-child(45) {
  --ro: 262deg;
  -webkit-animation-delay: 1.22s;
          animation-delay: 1.22s;
  background-image: radial-gradient(circle at top, #efcf8f, #704f10);
}
.container > div:nth-child(46) {
  --ro: 58deg;
  -webkit-animation-delay: 1.225s;
          animation-delay: 1.225s;
  background-image: radial-gradient(circle at top, #efd08f, #705010);
}
.container > div:nth-child(47) {
  --ro: 302deg;
  -webkit-animation-delay: 1.23s;
          animation-delay: 1.23s;
  background-image: radial-gradient(circle at top, #efd18f, #705210);
}
.container > div:nth-child(48) {
  --ro: 125deg;
  -webkit-animation-delay: 1.235s;
          animation-delay: 1.235s;
  background-image: radial-gradient(circle at top, #efd38f, #705310);
}
.container > div:nth-child(49) {
  --ro: 118deg;
  -webkit-animation-delay: 1.24s;
          animation-delay: 1.24s;
  background-image: radial-gradient(circle at top, #efd48f, #705510);
}
.container > div:nth-child(50) {
  --ro: 359deg;
  -webkit-animation-delay: 1.245s;
          animation-delay: 1.245s;
  background-image: radial-gradient(circle at top, #efd68f, #705610);
}
.container > div:nth-child(51) {
  --ro: 203deg;
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
  background-image: radial-gradient(circle at top, #efd78f, #705810);
}
.container > div:nth-child(52) {
  --ro: 175deg;
  -webkit-animation-delay: 1.255s;
          animation-delay: 1.255s;
  background-image: radial-gradient(circle at top, #efd98f, #705910);
}
.container > div:nth-child(53) {
  --ro: 206deg;
  -webkit-animation-delay: 1.26s;
          animation-delay: 1.26s;
  background-image: radial-gradient(circle at top, #efda8f, #705b10);
}
.container > div:nth-child(54) {
  --ro: 85deg;
  -webkit-animation-delay: 1.265s;
          animation-delay: 1.265s;
  background-image: radial-gradient(circle at top, #efdb8f, #705c10);
}
.container > div:nth-child(55) {
  --ro: 10deg;
  -webkit-animation-delay: 1.27s;
          animation-delay: 1.27s;
  background-image: radial-gradient(circle at top, #efdd8f, #705d10);
}
.container > div:nth-child(56) {
  --ro: 63deg;
  -webkit-animation-delay: 1.275s;
          animation-delay: 1.275s;
  background-image: radial-gradient(circle at top, #efde8f, #705f10);
}
.container > div:nth-child(57) {
  --ro: 200deg;
  -webkit-animation-delay: 1.28s;
          animation-delay: 1.28s;
  background-image: radial-gradient(circle at top, #efe08f, #706010);
}
.container > div:nth-child(58) {
  --ro: 168deg;
  -webkit-animation-delay: 1.285s;
          animation-delay: 1.285s;
  background-image: radial-gradient(circle at top, #efe18f, #706210);
}
.container > div:nth-child(59) {
  --ro: 87deg;
  -webkit-animation-delay: 1.29s;
          animation-delay: 1.29s;
  background-image: radial-gradient(circle at top, #efe38f, #706310);
}
.container > div:nth-child(60) {
  --ro: 85deg;
  -webkit-animation-delay: 1.295s;
          animation-delay: 1.295s;
  background-image: radial-gradient(circle at top, #efe48f, #706510);
}
.container > div:nth-child(61) {
  --ro: 275deg;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
  background-image: radial-gradient(circle at top, #efe68f, #706610);
}
.container > div:nth-child(62) {
  --ro: 89deg;
  -webkit-animation-delay: 1.305s;
          animation-delay: 1.305s;
  background-image: radial-gradient(circle at top, #efe78f, #706710);
}
.container > div:nth-child(63) {
  --ro: 215deg;
  -webkit-animation-delay: 1.31s;
          animation-delay: 1.31s;
  background-image: radial-gradient(circle at top, #efe88f, #706910);
}
.container > div:nth-child(64) {
  --ro: 240deg;
  -webkit-animation-delay: 1.315s;
          animation-delay: 1.315s;
  background-image: radial-gradient(circle at top, #efea8f, #706a10);
}
.container > div:nth-child(65) {
  --ro: 120deg;
  -webkit-animation-delay: 1.32s;
          animation-delay: 1.32s;
  background-image: radial-gradient(circle at top, #efeb8f, #706c10);
}
.container > div:nth-child(66) {
  --ro: 220deg;
  -webkit-animation-delay: 1.325s;
          animation-delay: 1.325s;
  background-image: radial-gradient(circle at top, #efed8f, #706d10);
}
.container > div:nth-child(67) {
  --ro: 92deg;
  -webkit-animation-delay: 1.33s;
          animation-delay: 1.33s;
  background-image: radial-gradient(circle at top, #efee8f, #706f10);
}
.container > div:nth-child(68) {
  --ro: 227deg;
  -webkit-animation-delay: 1.335s;
          animation-delay: 1.335s;
  background-image: radial-gradient(circle at top, #efef8f, #6f7010);
}
.container > div:nth-child(69) {
  --ro: 348deg;
  -webkit-animation-delay: 1.34s;
          animation-delay: 1.34s;
  background-image: radial-gradient(circle at top, #edef8f, #6e7010);
}
.container > div:nth-child(70) {
  --ro: 161deg;
  -webkit-animation-delay: 1.345s;
          animation-delay: 1.345s;
  background-image: radial-gradient(circle at top, #ecef8f, #6c7010);
}
.container > div:nth-child(71) {
  --ro: 28deg;
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
  background-image: radial-gradient(circle at top, #eaef8f, #6b7010);
}
.container > div:nth-child(72) {
  --ro: 106deg;
  -webkit-animation-delay: 1.355s;
          animation-delay: 1.355s;
  background-image: radial-gradient(circle at top, #e9ef8f, #697010);
}
.container > div:nth-child(73) {
  --ro: 124deg;
  -webkit-animation-delay: 1.36s;
          animation-delay: 1.36s;
  b.........完整代码请登录后点击上方下载按钮下载查看