css实现粒子球动画效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：css实现粒子球动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  height: 100%;
}

body {
  background: black;
  overflow: hidden;
}

.wrap {
  position: relative;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: rotate 14s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
.c {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
}

.c:nth-child(1) {
  animation: orbit1 14s infinite;
  animation-delay: 0.01s;
  background-color: #ff0100;
}

@keyframes orbit1 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-184deg) rotateY(89deg) translateX(100px) rotateZ(184deg);
  }
  80% {
    transform: rotateZ(-184deg) rotateY(89deg) translateX(100px) rotateZ(184deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-184deg) rotateY(89deg) translateX(300px) rotateZ(184deg);
  }
}
.c:nth-child(2) {
  animation: orbit2 14s infinite;
  animation-delay: 0.02s;
  background-color: #ff0100;
}

@keyframes orbit2 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-233deg) rotateY(92deg) translateX(100px) rotateZ(233deg);
  }
  80% {
    transform: rotateZ(-233deg) rotateY(92deg) translateX(100px) rotateZ(233deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-233deg) rotateY(92deg) translateX(300px) rotateZ(233deg);
  }
}
.c:nth-child(3) {
  animation: orbit3 14s infinite;
  animation-delay: 0.03s;
  background-color: #ff0200;
}

@keyframes orbit3 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-130deg) rotateY(7deg) translateX(100px) rotateZ(130deg);
  }
  80% {
    transform: rotateZ(-130deg) rotateY(7deg) translateX(100px) rotateZ(130deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-130deg) rotateY(7deg) translateX(300px) rotateZ(130deg);
  }
}
.c:nth-child(4) {
  animation: orbit4 14s infinite;
  animation-delay: 0.04s;
  background-color: #ff0200;
}

@keyframes orbit4 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-151deg) rotateY(330deg) translateX(100px) rotateZ(151deg);
  }
  80% {
    transform: rotateZ(-151deg) rotateY(330deg) translateX(100px) rotateZ(151deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-151deg) rotateY(330deg) translateX(300px) rotateZ(151deg);
  }
}
.c:nth-child(5) {
  animation: orbit5 14s infinite;
  animation-delay: 0.05s;
  background-color: #ff0300;
}

@keyframes orbit5 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-3deg) rotateY(319deg) translateX(100px) rotateZ(3deg);
  }
  80% {
    transform: rotateZ(-3deg) rotateY(319deg) translateX(100px) rotateZ(3deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-3deg) rotateY(319deg) translateX(300px) rotateZ(3deg);
  }
}
.c:nth-child(6) {
  animation: orbit6 14s infinite;
  animation-delay: 0.06s;
  background-color: #ff0300;
}

@keyframes orbit6 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-58deg) rotateY(44deg) translateX(100px) rotateZ(58deg);
  }
  80% {
    transform: rotateZ(-58deg) rotateY(44deg) translateX(100px) rotateZ(58deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-58deg) rotateY(44deg) translateX(300px) rotateZ(58deg);
  }
}
.c:nth-child(7) {
  animation: orbit7 14s infinite;
  animation-delay: 0.07s;
  background-color: #ff0400;
}

@keyframes orbit7 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-232deg) rotateY(319deg) translateX(100px) rotateZ(232deg);
  }
  80% {
    transform: rotateZ(-232deg) rotateY(319deg) translateX(100px) rotateZ(232deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-232deg) rotateY(319deg) translateX(300px) rotateZ(232deg);
  }
}
.c:nth-child(8) {
  animation: orbit8 14s infinite;
  animation-delay: 0.08s;
  background-color: #ff0500;
}

@keyframes orbit8 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-356deg) rotateY(104deg) translateX(100px) rotateZ(356deg);
  }
  80% {
    transform: rotateZ(-356deg) rotateY(104deg) translateX(100px) rotateZ(356deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-356deg) rotateY(104deg) translateX(300px) rotateZ(356deg);
  }
}
.c:nth-child(9) {
  animation: orbit9 14s infinite;
  animation-delay: 0.09s;
  background-color: #ff0500;
}

@keyframes orbit9 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-83deg) rotateY(300deg) translateX(100px) rotateZ(83deg);
  }
  80% {
    transform: rotateZ(-83deg) rotateY(300deg) translateX(100px) rotateZ(83deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-83deg) rotateY(300deg) translateX(300px) rotateZ(83deg);
  }
}
.c:nth-child(10) {
  animation: orbit10 14s infinite;
  animation-delay: 0.1s;
  background-color: #ff0600;
}

@keyframes orbit10 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-305deg) rotateY(277deg) translateX(100px) rotateZ(305deg);
  }
  80% {
    transform: rotateZ(-305deg) rotateY(277deg) translateX(100px) rotateZ(305deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-305deg) rotateY(277deg) translateX(300px) rotateZ(305deg);
  }
}
.c:nth-child(11) {
  animation: orbit11 14s infinite;
  animation-delay: 0.11s;
  background-color: #ff0600;
}

@keyframes orbit11 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-39deg) rotateY(122deg) translateX(100px) rotateZ(39deg);
  }
  80% {
    transform: rotateZ(-39deg) rotateY(122deg) translateX(100px) rotateZ(39deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-39deg) rotateY(122deg) translateX(300px) rotateZ(39deg);
  }
}
.c:nth-child(12) {
  animation: orbit12 14s infinite;
  animation-delay: 0.12s;
  background-color: #ff0700;
}

@keyframes orbit12 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-209deg) rotateY(138deg) translateX(100px) rotateZ(209deg);
  }
  80% {
    transform: rotateZ(-209deg) rotateY(138deg) translateX(100px) rotateZ(209deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-209deg) rotateY(138deg) translateX(300px) rotateZ(209deg);
  }
}
.c:nth-child(13) {
  animation: orbit13 14s infinite;
  animation-delay: 0.13s;
  background-color: #ff0700;
}

@keyframes orbit13 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-107deg) rotateY(182deg) translateX(100px) rotateZ(107deg);
  }
  80% {
    transform: rotateZ(-107deg) rotateY(182deg) translateX(100px) rotateZ(107deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-107deg) rotateY(182deg) translateX(300px) rotateZ(107deg);
  }
}
.c:nth-child(14) {
  animation: orbit14 14s infinite;
  animation-delay: 0.14s;
  background-color: #ff0800;
}

@keyframes orbit14 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-223deg) rotateY(264deg) translateX(100px) rotateZ(223deg);
  }
  80% {
    transform: rotateZ(-223deg) rotateY(264deg) translateX(100px) rotateZ(223deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-223deg) rotateY(264deg) translateX(300px) rotateZ(223deg);
  }
}
.c:nth-child(15) {
  animation: orbit15 14s infinite;
  animation-delay: 0.15s;
  background-color: #ff0900;
}

@keyframes orbit15 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-225deg) rotateY(233deg) translateX(100px) rotateZ(225deg);
  }
  80% {
    transform: rotateZ(-225deg) rotateY(233deg) translateX(100px) rotateZ(225deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-225deg) rotateY(233deg) translateX(300px) rotateZ(225deg);
  }
}
.c:nth-child(16) {
  animation: orbit16 14s infinite;
  animation-delay: 0.16s;
  background-color: #ff0900;
}

@keyframes orbit16 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-222deg) rotateY(33deg) translateX(100px) rotateZ(222deg);
  }
  80% {
    transform: rotateZ(-222deg) rotateY(33deg) translateX(100px) rotateZ(222deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-222deg) rotateY(33deg) translateX(300px) rotateZ(222deg);
  }
}
.c:nth-child(17) {
  animation: orbit17 14s infinite;
  animation-delay: 0.17s;
  background-color: #ff0a00;
}

@keyframes orbit17 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-311deg) rotateY(296deg) translateX(100px) rotateZ(311deg);
  }
  80% {
    transform: rotateZ(-311deg) rotateY(296deg) translateX(100px) rotateZ(311deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-311deg) rotateY(296deg) translateX(300px) rotateZ(311deg);
  }
}
.c:nth-child(18) {
  animation: orbit18 14s infinite;
  animation-delay: 0.18s;
  background-color: #ff0a00;
}

@keyframes orbit18 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-17deg) rotateY(213deg) translateX(100px) rotateZ(17deg);
  }
  80% {
    transform: rotateZ(-17deg) rotateY(213deg) translateX(100px) rotateZ(17deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-17deg) rotateY(213deg) translateX(300px) rotateZ(17deg);
  }
}
.c:nth-child(19) {
  animation: orbit19 14s infinite;
  animation-delay: 0.19s;
  background-color: #ff0b00;
}

@keyframes orbit19 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-254deg) rotateY(57deg) translateX(100px) rotateZ(254deg);
  }
  80% {
    transform: rotateZ(-254deg) rotateY(57deg) translateX(100px) rotateZ(254deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-254deg) rotateY(57deg) translateX(300px) rotateZ(254deg);
  }
}
.c:nth-child(20) {
  animation: orbit20 14s infinite;
  animation-delay: 0.2s;
  background-color: #ff0b00;
}

@keyframes orbit20 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-60deg) rotateY(339deg) translateX(100px) rotateZ(60deg);
  }
  80% {
    transform: rotateZ(-60deg) rotateY(339deg) translateX(100px) rotateZ(60deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-60deg) rotateY(339deg) translateX(300px) rotateZ(60deg);
  }
}
.c:nth-child(21) {
  animation: orbit21 14s infinite;
  animation-delay: 0.21s;
  background-color: #ff0c00;
}

@keyframes orbit21 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-342deg) rotateY(354deg) translateX(100px) rotateZ(342deg);
  }
  80% {
    transform: rotateZ(-342deg) rotateY(354deg) translateX(100px) rotateZ(342deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-342deg) rotateY(354deg) translateX(300px) rotateZ(342deg);
  }
}
.c:nth-child(22) {
  animation: orbit22 14s infinite;
  animation-delay: 0.22s;
  background-color: #ff0c00;
}

@keyframes orbit22 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-169deg) rotateY(63deg) translateX(100px) rotateZ(169deg);
  }
  80% {
    transform: rotateZ(-169deg) rotateY(63deg) translateX(100px) rotateZ(169deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-169deg) rotateY(63deg) translateX(300px) rotateZ(169deg);
  }
}
.c:nth-child(23) {
  animation: orbit23 14s infinite;
  animation-delay: 0.23s;
  background-color: #ff0d00;
}

@keyframes orbit23 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-329deg) rotateY(54deg) translateX(100px) rotateZ(329deg);
  }
  80% {
    transform: rotateZ(-329deg) rotateY(54deg) translateX(100px) rotateZ(329deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-329deg) rotateY(54deg) translateX(300px) rotateZ(329deg);
  }
}
.c:nth-child(24) {
  animation: orbit24 14s infinite;
  animation-delay: 0.24s;
  background-color: #ff0e00;
}

@keyframes orbit24 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-244deg) rotateY(131deg) translateX(100px) rotateZ(244deg);
  }
  80% {
    transform: rotateZ(-244deg) rotateY(131deg) translateX(100px) rotateZ(244deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-244deg) rotateY(131deg) translateX(300px) rotateZ(244deg);
  }
}
.c:nth-child(25) {
  animation: orbit25 14s infinite;
  animation-delay: 0.25s;
  background-color: #ff0e00;
}

@keyframes orbit25 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-109deg) rotateY(257deg) translateX(100px) rotateZ(109deg);
  }
  80% {
    transform: rotateZ(-109deg) rotateY(257deg) translateX(100px) rotateZ(109deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-109deg) rotateY(257deg) translateX(300px) rotateZ(109deg);
  }
}
.c:nth-child(26) {
  animation: orbit26 14s infinite;
  animation-delay: 0.26s;
  background-color: #ff0f00;
}

@keyframes orbit26 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-196deg) rotateY(105deg) translateX(100px) rotateZ(196deg);
  }
  80% {
    transform: rotateZ(-196deg) rotateY(105deg) translateX(100px) rotateZ(196deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-196deg) rotateY(105deg) translateX(300px) rotateZ(196deg);
  }
}
.c:nth-child(27) {
  animation: orbit27 14s infinite;
  animation-delay: 0.27s;
  background-color: #ff0f00;
}

@keyframes orbit27 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-235deg) rotateY(222deg) translateX(100px) rotateZ(235deg);
  }
  80% {
    transform: rotateZ(-235deg) rotateY(222deg) translateX(100px) rotateZ(235deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-235deg) rotateY(222deg) translateX(300px) rotateZ(235deg);
  }
}
.c:nth-child(28) {
  animation: orbit28 14s infinite;
  animation-delay: 0.28s;
  background-color: #ff1000;
}

@keyframes orbit28 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-281deg) rotateY(85deg) translateX(100px) rotateZ(281deg);
  }
  80% {
    transform: rotateZ(-281deg) rotateY(85deg) translateX(100px) rotateZ(281deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-281deg) rotateY(85deg) translateX(300px) rotateZ(281deg);
  }
}
.c:nth-child(29) {
  animation: orbit29 14s infinite;
  animation-delay: 0.29s;
  background-color: #ff1000;
}

@keyframes orbit29 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-43deg) rotateY(332deg) translateX(100px) rotateZ(43deg);
  }
  80% {
    transform: rotateZ(-43deg) rotateY(332deg) translateX(100px) rotateZ(43deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-43deg) rotateY(332deg) translateX(300px) rotateZ(43deg);
  }
}
.c:nth-child(30) {
  animation: orbit30 14s infinite;
  animation-delay: 0.3s;
  background-color: #ff1100;
}

@keyframes orbit30 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-275deg) rotateY(320deg) translateX(100px) rotateZ(275deg);
  }
  80% {
    transform: rotateZ(-275deg) rotateY(320deg) translateX(100px) rotateZ(275deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-275deg) rotateY(320deg) translateX(300px) rotateZ(275deg);
  }
}
.c:nth-child(31) {
  animation: orbit31 14s infinite;
  animation-delay: 0.31s;
  background-color: #ff1200;
}

@keyframes orbit31 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-107deg) rotateY(165deg) translateX(100px) rotateZ(107deg);
  }
  80% {
    transform: rotateZ(-107deg) rotateY(165deg) translateX(100px) rotateZ(107deg);
    opacity: 1;
  }
  100% {
    transform: rotateZ(-107deg) rotateY(165deg) translateX(300px) rotateZ(107deg);
  }
}
.c:nth-child(32) {
  animation: orbit32 14s infinite;
  animation-delay: 0.32s;
  background-color: #ff1200;
}

@keyframes orbit32 {
  20% {
    opacity: 1;
  }
  30% {
    transform: rotateZ(-301deg) rotateY(190deg) translateX(100px) rotateZ(301deg);
  }
  80% {
    transform: rotateZ(-301deg) rotateY(190deg) translateX(100px) rotateZ(301deg);
    opacity: 1;
  }
  100% {
    transform: rot.........完整代码请登录后点击上方下载按钮下载查看