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