css实现粒子球动画效果
代码语言：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: rotateZ(-301deg) rotateY(190deg) translateX(300px) rotateZ(301deg);
}
}
.c:nth-child(33) {
animation: orbit33 14s infinite;
animation-delay: 0.33s;
background-color: #ff1300;
}
@keyframes orbit33 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-337deg) rotateY(10deg) translateX(100px) rotateZ(337deg);
}
80% {
transform: rotateZ(-337deg) rotateY(10deg) translateX(100px) rotateZ(337deg);
opacity: 1;
}
100% {
transform: rotateZ(-337deg) rotateY(10deg) translateX(300px) rotateZ(337deg);
}
}
.c:nth-child(34) {
animation: orbit34 14s infinite;
animation-delay: 0.34s;
background-color: #ff1300;
}
@keyframes orbit34 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-277deg) rotateY(6deg) translateX(100px) rotateZ(277deg);
}
80% {
transform: rotateZ(-277deg) rotateY(6deg) translateX(100px) rotateZ(277deg);
opacity: 1;
}
100% {
transform: rotateZ(-277deg) rotateY(6deg) translateX(300px) rotateZ(277deg);
}
}
.c:nth-child(35) {
animation: orbit35 14s infinite;
animation-delay: 0.35s;
background-color: #ff1400;
}
@keyframes orbit35 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-292deg) rotateY(59deg) translateX(100px) rotateZ(292deg);
}
80% {
transform: rotateZ(-292deg) rotateY(59deg) translateX(100px) rotateZ(292deg);
opacity: 1;
}
100% {
transform: rotateZ(-292deg) rotateY(59deg) translateX(300px) rotateZ(292deg);
}
}
.c:nth-child(36) {
animation: orbit36 14s infinite;
animation-delay: 0.36s;
background-color: #ff1400;
}
@keyframes orbit36 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-90deg) rotateY(70deg) translateX(100px) rotateZ(90deg);
}
80% {
transform: rotateZ(-90deg) rotateY(70deg) translateX(100px) rotateZ(90deg);
opacity: 1;
}
100% {
transform: rotateZ(-90deg) rotateY(70deg) translateX(300px) rotateZ(90deg);
}
}
.c:nth-child(37) {
animation: orbit37 14s infinite;
animation-delay: 0.37s;
background-color: #ff1500;
}
@keyframes orbit37 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-167deg) rotateY(87deg) translateX(100px) rotateZ(167deg);
}
80% {
transform: rotateZ(-167deg) rotateY(87deg) translateX(100px) rotateZ(167deg);
opacity: 1;
}
100% {
transform: rotateZ(-167deg) rotateY(87deg) translateX(300px) rotateZ(167deg);
}
}
.c:nth-child(38) {
animation: orbit38 14s infinite;
animation-delay: 0.38s;
background-color: #ff1600;
}
@keyframes orbit38 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-2deg) rotateY(108deg) translateX(100px) rotateZ(2deg);
}
80% {
transform: rotateZ(-2deg) rotateY(108deg) translateX(100px) rotateZ(2deg);
opacity: 1;
}
100% {
transform: rotateZ(-2deg) rotateY(108deg) translateX(300px) rotateZ(2deg);
}
}
.c:nth-child(39) {
animation: orbit39 14s infinite;
animation-delay: 0.39s;
background-color: #ff1600;
}
@keyframes orbit39 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-211deg) rotateY(176deg) translateX(100px) rotateZ(211deg);
}
80% {
transform: rotateZ(-211deg) rotateY(176deg) translateX(100px) rotateZ(211deg);
opacity: 1;
}
100% {
transform: rotateZ(-211deg) rotateY(176deg) translateX(300px) rotateZ(211deg);
}
}
.c:nth-child(40) {
animation: orbit40 14s infinite;
animation-delay: 0.4s;
background-color: #ff1700;
}
@keyframes orbit40 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-156deg) rotateY(349deg) translateX(100px) rotateZ(156deg);
}
80% {
transform: rotateZ(-156deg) rotateY(349deg) translateX(100px) rotateZ(156deg);
opacity: 1;
}
100% {
transform: rotateZ(-156deg) rotateY(349deg) translateX(300px) rotateZ(156deg);
}
}
.c:nth-child(41) {
animation: orbit41 14s infinite;
animation-delay: 0.41s;
background-color: #ff1700;
}
@keyframes orbit41 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-52deg) rotateY(25deg) translateX(100px) rotateZ(52deg);
}
80% {
transform: rotateZ(-52deg) rotateY(25deg) translateX(100px) rotateZ(52deg);
opacity: 1;
}
100% {
transform: rotateZ(-52deg) rotateY(25deg) translateX(300px) rotateZ(52deg);
}
}
.c:nth-child(42) {
animation: orbit42 14s infinite;
animation-delay: 0.42s;
background-color: #ff1800;
}
@keyframes orbit42 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-180deg) rotateY(263deg) translateX(100px) rotateZ(180deg);
}
80% {
transform: rotateZ(-180deg) rotateY(263deg) translateX(100px) rotateZ(180deg);
opacity: 1;
}
100% {
transform: rotateZ(-180deg) rotateY(263deg) translateX(300px) rotateZ(180deg);
}
}
.c:nth-child(43) {
animation: orbit43 14s infinite;
animation-delay: 0.43s;
background-color: #ff1800;
}
@keyframes orbit43 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-201deg) rotateY(353deg) translateX(100px) rotateZ(201deg);
}
80% {
transform: rotateZ(-201deg) rotateY(353deg) translateX(100px) rotateZ(201deg);
opacity: 1;
}
100% {
transform: rotateZ(-201deg) rotateY(353deg) translateX(300px) rotateZ(201deg);
}
}
.c:nth-child(44) {
animation: orbit44 14s infinite;
animation-delay: 0.44s;
background-color: #ff1900;
}
@keyframes orbit44 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-281deg) rotateY(255deg) translateX(100px) rotateZ(281deg);
}
80% {
transform: rotateZ(-281deg) rotateY(255deg) translateX(100px) rotateZ(281deg);
opacity: 1;
}
100% {
transform: rotateZ(-281deg) rotateY(255deg) translateX(300px) rotateZ(281deg);
}
}
.c:nth-child(45) {
animation: orbit45 14s infinite;
animation-delay: 0.45s;
background-color: #ff1a00;
}
@keyframes orbit45 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-195deg) rotateY(72deg) translateX(100px) rotateZ(195deg);
}
80% {
transform: rotateZ(-195deg) rotateY(72deg) translateX(100px) rotateZ(195deg);
opacity: 1;
}
100% {
transform: rotateZ(-195deg) rotateY(72deg) translateX(300px) rotateZ(195deg);
}
}
.c:nth-child(46) {
animation: orbit46 14s infinite;
animation-delay: 0.46s;
background-color: #ff1a00;
}
@keyframes orbit46 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-219deg) rotateY(341deg) translateX(100px) rotateZ(219deg);
}
80% {
transform: rotateZ(-219deg) rotateY(341deg) translateX(100px) rotateZ(219deg);
opacity: 1;
}
100% {
transform: rotateZ(-219deg) rotateY(341deg) translateX(300px) rotateZ(219deg);
}
}
.c:nth-child(47) {
animation: orbit47 14s infinite;
animation-delay: 0.47s;
background-color: #ff1b00;
}
@keyframes orbit47 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-217deg) rotateY(317deg) translateX(100px) rotateZ(217deg);
}
80% {
transform: rotateZ(-217deg) rotateY(317deg) translateX(100px) rotateZ(217deg);
opacity: 1;
}
100% {
transform: rotateZ(-217deg) rotateY(317deg) translateX(300px) rotateZ(217deg);
}
}
.c:nth-child(48) {
animation: orbit48 14s infinite;
animation-delay: 0.48s;
background-color: #ff1b00;
}
@keyframes orbit48 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-47deg) rotateY(46deg) translateX(100px) rotateZ(47deg);
}
80% {
transform: rotateZ(-47deg) rotateY(46deg) translateX(100px) rotateZ(47deg);
opacity: 1;
}
100% {
transform: rotateZ(-47deg) rotateY(46deg) translateX(300px) rotateZ(47deg);
}
}
.c:nth-child(49) {
animation: orbit49 14s infinite;
animation-delay: 0.49s;
background-color: #ff1c00;
}
@keyframes orbit49 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-316deg) rotateY(20deg) translateX(100px) rotateZ(316deg);
}
80% {
transform: rotateZ(-316deg) rotateY(20deg) translateX(100px) rotateZ(316deg);
opacity: 1;
}
100% {
transform: rotateZ(-316deg) rotateY(20deg) translateX(300px) rotateZ(316deg);
}
}
.c:nth-child(50) {
animation: orbit50 14s infinite;
animation-delay: 0.5s;
background-color: #ff1c00;
}
@keyframes orbit50 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-294deg) rotateY(255deg) translateX(100px) rotateZ(294deg);
}
80% {
transform: rotateZ(-294deg) rotateY(255deg) translateX(100px) rotateZ(294deg);
opacity: 1;
}
100% {
transform: rotateZ(-294deg) rotateY(255deg) translateX(300px) rotateZ(294deg);
}
}
.c:nth-child(51) {
animation: orbit51 14s infinite;
animation-delay: 0.51s;
background-color: #ff1d00;
}
@keyframes orbit51 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-67deg) rotateY(136deg) translateX(100px) rotateZ(67deg);
}
80% {
transform: rotateZ(-67deg) rotateY(136deg) translateX(100px) rotateZ(67deg);
opacity: 1;
}
100% {
transform: rotateZ(-67deg) rotateY(136deg) translateX(300px) rotateZ(67deg);
}
}
.c:nth-child(52) {
animation: orbit52 14s infinite;
animation-delay: 0.52s;
background-color: #ff1d00;
}
@keyframes orbit52 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-66deg) rotateY(288deg) translateX(100px) rotateZ(66deg);
}
80% {
transform: rotateZ(-66deg) rotateY(288deg) translateX(100px) rotateZ(66deg);
opacity: 1;
}
100% {
transform: rotateZ(-66deg) rotateY(288deg) translateX(300px) rotateZ(66deg);
}
}
.c:nth-child(53) {
animation: orbit53 14s infinite;
animation-delay: 0.53s;
background-color: #ff1e00;
}
@keyframes orbit53 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-154deg) rotateY(81deg) translateX(100px) rotateZ(154deg);
}
80% {
transform: rotateZ(-154deg) rotateY(81deg) translateX(100px) rotateZ(154deg);
opacity: 1;
}
100% {
transform: rotateZ(-154deg) rotateY(81deg) translateX(300px) rotateZ(154deg);
}
}
.c:nth-child(54) {
animation: orbit54 14s infinite;
animation-delay: 0.54s;
background-color: #ff1f00;
}
@keyframes orbit54 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-56deg) rotateY(271deg) translateX(100px) rotateZ(56deg);
}
80% {
transform: rotateZ(-56deg) rotateY(271deg) translateX(100px) rotateZ(56deg);
opacity: 1;
}
100% {
transform: rotateZ(-56deg) rotateY(271deg) translateX(300px) rotateZ(56deg);
}
}
.c:nth-child(55) {
animation: orbit55 14s infinite;
animation-delay: 0.55s;
background-color: #ff1f00;
}
@keyframes orbit55 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-35deg) rotateY(275deg) translateX(100px) rotateZ(35deg);
}
80% {
transform: rotateZ(-35deg) rotateY(275deg) translateX(100px) rotateZ(35deg);
opacity: 1;
}
100% {
transform: rotateZ(-35deg) rotateY(275deg) translateX(300px) rotateZ(35deg);
}
}
.c:nth-child(56) {
animation: orbit56 14s infinite;
animation-delay: 0.56s;
background-color: #ff2000;
}
@keyframes orbit56 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-330deg) rotateY(311deg) translateX(100px) rotateZ(330deg);
}
80% {
transform: rotateZ(-330deg) rotateY(311deg) translateX(100px) rotateZ(330deg);
opacity: 1;
}
100% {
transform: rotateZ(-330deg) rotateY(311deg) translateX(300px) rotateZ(330deg);
}
}
.c:nth-child(57) {
animation: orbit57 14s infinite;
animation-delay: 0.57s;
background-color: #ff2000;
}
@keyframes orbit57 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-145deg) rotateY(114deg) translateX(100px) rotateZ(145deg);
}
80% {
transform: rotateZ(-145deg) rotateY(114deg) translateX(100px) rotateZ(145deg);
opacity: 1;
}
100% {
transform: rotateZ(-145deg) rotateY(114deg) translateX(300px) rotateZ(145deg);
}
}
.c:nth-child(58) {
animation: orbit58 14s infinite;
animation-delay: 0.58s;
background-color: #ff2100;
}
@keyframes orbit58 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-27deg) rotateY(306deg) translateX(100px) rotateZ(27deg);
}
80% {
transform: rotateZ(-27deg) rotateY(306deg) translateX(100px) rotateZ(27deg);
opacity: 1;
}
100% {
transform: rotateZ(-27deg) rotateY(306deg) translateX(300px) rotateZ(27deg);
}
}
.c:nth-child(59) {
animation: orbit59 14s infinite;
animation-delay: 0.59s;
background-color: #ff2100;
}
@keyframes orbit59 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-6deg) rotateY(108deg) translateX(100px) rotateZ(6deg);
}
80% {
transform: rotateZ(-6deg) rotateY(108deg) translateX(100px) rotateZ(6deg);
opacity: 1;
}
100% {
transform: rotateZ(-6deg) rotateY(108deg) translateX(300px) rotateZ(6deg);
}
}
.c:nth-child(60) {
animation: orbit60 14s infinite;
animation-delay: 0.6s;
background-color: #ff2200;
}
@keyframes orbit60 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-360deg) rotateY(113deg) translateX(100px) rotateZ(360deg);
}
80% {
transform: rotateZ(-360deg) rotateY(113deg) translateX(100px) rotateZ(360deg);
opacity: 1;
}
100% {
transform: rotateZ(-360deg) rotateY(113deg) translateX(300px) rotateZ(360deg);
}
}
.c:nth-child(61) {
animation: orbit61 14s infinite;
animation-delay: 0.61s;
background-color: #ff2300;
}
@keyframes orbit61 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-116deg) rotateY(206deg) translateX(100px) rotateZ(116deg);
}
80% {
transform: rotateZ(-116deg) rotateY(206deg) translateX(100px) rotateZ(116deg);
opacity: 1;
}
100% {
transform: rotateZ(-116deg) rotateY(206deg) translateX(300px) rotateZ(116deg);
}
}
.c:nth-child(62) {
animation: orbit62 14s infinite;
animation-delay: 0.62s;
background-color: #ff2300;
}
@keyframes orbit62 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-283deg) rotateY(187deg) translateX(100px) rotateZ(283deg);
}
80% {
transform: rotateZ(-283deg) rotateY(187deg) translateX(100px) rotateZ(283deg);
opacity: 1;
}
100% {
transform: rotateZ(-283deg) rotateY(187deg) translateX(300px) rotateZ(283deg);
}
}
.c:nth-child(63) {
animation: orbit63 14s infinite;
animation-delay: 0.63s;
background-color: #ff2400;
}
@keyframes orbit63 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-324deg) rotateY(30deg) translateX(100px) rotateZ(324deg);
}
80% {
transform: rotateZ(-324deg) rotateY(30deg) translateX(100px) rotateZ(324deg);
opacity: 1;
}
100% {
transform: rotateZ(-324deg) rotateY(30deg) translateX(300px) rotateZ(324deg);
}
}
.c:nth-child(64) {
animation: orbit64 14s infinite;
animation-delay: 0.64s;
background-color: #ff2400;
}
@keyframes orbit64 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-341deg) rotateY(47deg) translateX(100px) rotateZ(341deg);
}
80% {
transform: rotateZ(-341deg) rotateY(47deg) translateX(100px) rotateZ(341deg);
opacity: 1;
}
100% {
transform: rotateZ(-341deg) rotateY(47deg) translateX(300px) rotateZ(341deg);
}
}
.c:nth-child(65) {
animation: orbit65 14s infinite;
animation-delay: 0.65s;
background-color: #ff2500;
}
@keyframes orbit65 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-252deg) rotateY(352deg) translateX(100px) rotateZ(252deg);
}
80% {
transform: rotateZ(-252deg) rotateY(352deg) translateX(100px) rotateZ(252deg);
opacity: 1;
}
100% {
transform: rotateZ(-252deg) rotateY(352deg) translateX(300px) rotateZ(252deg);
}
}
.c:nth-child(66) {
animation: orbit66 14s infinite;
animation-delay: 0.66s;
background-color: #ff2500;
}
@keyframes orbit66 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-256deg) rotateY(272deg) translateX(100px) rotateZ(256deg);
}
80% {
transform: rotateZ(-256deg) rotateY(272deg) translateX(100px) rotateZ(256deg);
opacity: 1;
}
100% {
transform: rotateZ(-256deg) rotateY(272deg) translateX(300px) rotateZ(256deg);
}
}
.c:nth-child(67) {
animation: orbit67 14s infinite;
animation-delay: 0.67s;
background-color: #ff2600;
}
@keyframes orbit67 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-15deg) rotateY(353deg) translateX(100px) rotateZ(15deg);
}
80% {
transform: rotateZ(-15deg) rotateY(353deg) translateX(100px) rotateZ(15deg);
opacity: 1;
}
100% {
transform: rotateZ(-15deg) rotateY(353deg) translateX(300px) rotateZ(15deg);
}
}
.c:nth-child(68) {
animation: orbit68 14s infinite;
animation-delay: 0.68s;
background-color: #ff2700;
}
@keyframes orbit68 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-191deg) rotateY(344deg) translateX(100px) rotateZ(191deg);
}
80% {
transform: rotateZ(-191deg) rotateY(344deg) translateX(100px) rotateZ(191deg);
opacity: 1;
}
100% {
transform: rotateZ(-191deg) rotateY(344deg) translateX(300px) rotateZ(191deg);
}
}
.c:nth-child(69) {
animation: orbit69 14s infinite;
animation-delay: 0.69s;
background-color: #ff2700;
}
@keyframes orbit69 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-249deg) rotateY(267deg) translateX(100px) rotateZ(249deg);
}
80% {
transform: rotateZ(-249deg) rotateY(267deg) translateX(100px) rotateZ(249deg);
opacity: 1;
}
100% {
transform: rotateZ(-249deg) rotateY(267deg) translateX(300px) rotateZ(249deg);
}
}
.c:nth-child(70) {
animation: orbit70 14s infinite;
animation-delay: 0.7s;
background-color: #ff2800;
}
@keyframes orbit70 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-205deg) rotateY(16deg) translateX(100px) rotateZ(205deg);
}
80% {
transform: rotateZ(-205deg) rotateY(16deg) translateX(100px) rotateZ(205deg);
opacity: 1;
}
100% {
transform: rotateZ(-205deg) rotateY(16deg) translateX(300px) rotateZ(205deg);
}
}
.c:nth-child(71) {
animation: orbit71 14s infinite;
animation-delay: 0.71s;
background-color: #ff2800;
}
@keyframes orbit71 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-306deg) rotateY(339deg) translateX(100px) rotateZ(306deg);
}
80% {
transform: rotateZ(-306deg) rotateY(339deg) translateX(100px) rotateZ(306deg);
opacity: 1;
}
100% {
transform: rotateZ(-306deg) rotateY(339deg) translateX(300px) rotateZ(306deg);
}
}
.c:nth-child(72) {
animation: orbit72 14s infinite;
animation-delay: 0.72s;
background-color: #ff2900;
}
@keyframes orbit72 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-201deg) rotateY(216deg) translateX(100px) rotateZ(201deg);
}
80% {
transform: rotateZ(-201deg) rotateY(216deg) translateX(100px) rotateZ(201deg);
opacity: 1;
}
100% {
transform: rotateZ(-201deg) rotateY(216deg) translateX(300px) rotateZ(201deg);
}
}
.c:nth-child(73) {
animation: orbit73 14s infinite;
animation-delay: 0.73s;
background-color: #ff2900;
}
@keyframes orbit73 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-75deg) rotateY(35deg) translateX(100px) rotateZ(75deg);
}
80% {
transform: rotateZ(-75deg) rotateY(35deg) translateX(100px) rotateZ(75deg);
opacity: 1;
}
100% {
transform: rotateZ(-75deg) rotateY(35deg) translateX(300px) rotateZ(75deg);
}
}
.c:nth-child(74) {
animation: orbit74 14s infinite;
animation-delay: 0.74s;
background-color: #ff2a00;
}
@keyframes orbit74 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-54deg) rotateY(40deg) translateX(100px) rotateZ(54deg);
}
80% {
transform: rotateZ(-54deg) rotateY(40deg) translateX(100px) rotateZ(54deg);
opacity: 1;
}
100% {
transform: rotateZ(-54deg) rotateY(40deg) translateX(300px) rotateZ(54deg);
}
}
.c:nth-child(75) {
animation: orbit75 14s infinite;
animation-delay: 0.75s;
background-color: #ff2b00;
}
@keyframes orbit75 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-328deg) rotateY(194deg) translateX(100px) rotateZ(328deg);
}
80% {
transform: rotateZ(-328deg) rotateY(194deg) translateX(100px) rotateZ(328deg);
opacity: 1;
}
100% {
transform: rotateZ(-328deg) rotateY(194deg) translateX(300px) rotateZ(328deg);
}
}
.c:nth-child(76) {
animation: orbit76 14s infinite;
animation-delay: 0.76s;
background-color: #ff2b00;
}
@keyframes orbit76 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-222deg) rotateY(186deg) translateX(100px) rotateZ(222deg);
}
80% {
transform: rotateZ(-222deg) rotateY(186deg) translateX(100px) rotateZ(222deg);
opacity: 1;
}
100% {
transform: rotateZ(-222deg) rotateY(186deg) translateX(300px) rotateZ(222deg);
}
}
.c:nth-child(77) {
animation: orbit77 14s infinite;
animation-delay: 0.77s;
background-color: #ff2c00;
}
@keyframes orbit77 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-161deg) rotateY(12deg) translateX(100px) rotateZ(161deg);
}
80% {
transform: rotateZ(-161deg) rotateY(12deg) translateX(100px) rotateZ(161deg);
opacity: 1;
}
100% {
transform: rotateZ(-161deg) rotateY(12deg) translateX(300px) rotateZ(161deg);
}
}
.c:nth-child(78) {
animation: orbit78 14s infinite;
animation-delay: 0.78s;
background-color: #ff2c00;
}
@keyframes orbit78 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-60deg) rotateY(60deg) translateX(100px) rotateZ(60deg);
}
80% {
transform: rotateZ(-60deg) rotateY(60deg) translateX(100px) rotateZ(60deg);
opacity: 1;
}
100% {
transform: rotateZ(-60deg) rotateY(60deg) translateX(300px) rotateZ(60deg);
}
}
.c:nth-child(79) {
animation: orbit79 14s infinite;
animation-delay: 0.79s;
background-color: #ff2d00;
}
@keyframes orbit79 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-245deg) rotateY(90deg) translateX(100px) rotateZ(245deg);
}
80% {
transform: rotateZ(-245deg) rotateY(90deg) translateX(100px) rotateZ(245deg);
opacity: 1;
}
100% {
transform: rotateZ(-245deg) rotateY(90deg) translateX(300px) rotateZ(245deg);
}
}
.c:nth-child(80) {
animation: orbit80 14s infinite;
animation-delay: 0.8s;
background-color: #ff2d00;
}
@keyframes orbit80 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-158deg) rotateY(179deg) translateX(100px) rotateZ(158deg);
}
80% {
transform: rotateZ(-158deg) rotateY(179deg) translateX(100px) rotateZ(158deg);
opacity: 1;
}
100% {
transform: rotateZ(-158deg) rotateY(179deg) translateX(300px) rotateZ(158deg);
}
}
.c:nth-child(81) {
animation: orbit81 14s infinite;
animation-delay: 0.81s;
background-color: #ff2e00;
}
@keyframes orbit81 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-315deg) rotateY(304deg) translateX(100px) rotateZ(315deg);
}
80% {
transform: rotateZ(-315deg) rotateY(304deg) translateX(100px) rotateZ(315deg);
opacity: 1;
}
100% {
transform: rotateZ(-315deg) rotateY(304deg) translateX(300px) rotateZ(315deg);
}
}
.c:nth-child(82) {
animation: orbit82 14s infinite;
animation-delay: 0.82s;
background-color: #ff2e00;
}
@keyframes orbit82 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-222deg) rotateY(153deg) translateX(100px) rotateZ(222deg);
}
80% {
transform: rotateZ(-222deg) rotateY(153deg) translateX(100px) rotateZ(222deg);
opacity: 1;
}
100% {
transform: rotateZ(-222deg) rotateY(153deg) translateX(300px) rotateZ(222deg);
}
}
.c:nth-child(83) {
animation: orbit83 14s infinite;
animation-delay: 0.83s;
background-color: #ff2f00;
}
@keyframes orbit83 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-77deg) rotateY(295deg) translateX(100px) rotateZ(77deg);
}
80% {
transform: rotateZ(-77deg) rotateY(295deg) translateX(100px) rotateZ(77deg);
opacity: 1;
}
100% {
transform: rotateZ(-77deg) rotateY(295deg) translateX(300px) rotateZ(77deg);
}
}
.c:nth-child(84) {
animation: orbit84 14s infinite;
animation-delay: 0.84s;
background-color: #ff3000;
}
@keyframes orbit84 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-1deg) rotateY(193deg) translateX(100px) rotateZ(1deg);
}
80% {
transform: rotateZ(-1deg) rotateY(193deg) translateX(100px) rotateZ(1deg);
opacity: 1;
}
100% {
transform: rotateZ(-1deg) rotateY(193deg) translateX(300px) rotateZ(1deg);
}
}
.c:nth-child(85) {
animation: orbit85 14s infinite;
animation-delay: 0.85s;
background-color: #ff3000;
}
@keyframes orbit85 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-62deg) rotateY(28deg) translateX(100px) rotateZ(62deg);
}
80% {
transform: rotateZ(-62deg) rotateY(28deg) translateX(100px) rotateZ(62deg);
opacity: 1;
}
100% {
transform: rotateZ(-62deg) rotateY(28deg) translateX(300px) rotateZ(62deg);
}
}
.c:nth-child(86) {
animation: orbit86 14s infinite;
animation-delay: 0.86s;
background-color: #ff3100;
}
@keyframes orbit86 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-345deg) rotateY(253deg) translateX(100px) rotateZ(345deg);
}
80% {
transform: rotateZ(-345deg) rotateY(253deg) translateX(100px) rotateZ(345deg);
opacity: 1;
}
100% {
transform: rotateZ(-345deg) rotateY(253deg) translateX(300px) rotateZ(345deg);
}
}
.c:nth-child(87) {
animation: orbit87 14s infinite;
animation-delay: 0.87s;
background-color: #ff3100;
}
@keyframes orbit87 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-10deg) rotateY(346deg) translateX(100px) rotateZ(10deg);
}
80% {
transform: rotateZ(-10deg) rotateY(346deg) translateX(100px) rotateZ(10deg);
opacity: 1;
}
100% {
transform: rotateZ(-10deg) rotateY(346deg) translateX(300px) rotateZ(10deg);
}
}
.c:nth-child(88) {
animation: orbit88 14s infinite;
animation-delay: 0.88s;
background-color: #ff3200;
}
@keyframes orbit88 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-76deg) rotateY(43deg) translateX(100px) rotateZ(76deg);
}
80% {
transform: rotateZ(-76deg) rotateY(43deg) translateX(100px) rotateZ(76deg);
opacity: 1;
}
100% {
transform: rotateZ(-76deg) rotateY(43deg) translateX(300px) rotateZ(76deg);
}
}
.c:nth-child(89) {
animation: orbit89 14s infinite;
animation-delay: 0.89s;
background-color: #ff3200;
}
@keyframes orbit89 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-226deg) rotateY(65deg) translateX(100px) rotateZ(226deg);
}
80% {
transform: rotateZ(-226deg) rotateY(65deg) translateX(100px) rotateZ(226deg);
opacity: 1;
}
100% {
transform: rotateZ(-226deg) rotateY(65deg) translateX(300px) rotateZ(226deg);
}
}
.c:nth-child(90) {
animation: orbit90 14s infinite;
animation-delay: 0.9s;
background-color: #ff3300;
}
@keyframes orbit90 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-60deg) rotateY(299deg) translateX(100px) rotateZ(60deg);
}
80% {
transform: rotateZ(-60deg) rotateY(299deg) translateX(100px) rotateZ(60deg);
opacity: 1;
}
100% {
transform: rotateZ(-60deg) rotateY(299deg) translateX(300px) rotateZ(60deg);
}
}
.c:nth-child(91) {
animation: orbit91 14s infinite;
animation-delay: 0.91s;
background-color: #ff3400;
}
@keyframes orbit91 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-205deg) rotateY(202deg) translateX(100px) rotateZ(205deg);
}
80% {
transform: rotateZ(-205deg) rotateY(202deg) translateX(100px) rotateZ(205deg);
opacity: 1;
}
100% {
transform: rotateZ(-205deg) rotateY(202deg) translateX(300px) rotateZ(205deg);
}
}
.c:nth-child(92) {
animation: orbit92 14s infinite;
animation-delay: 0.92s;
background-color: #ff3400;
}
@keyframes orbit92 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-215deg) rotateY(219deg) translateX(100px) rotateZ(215deg);
}
80% {
transform: rotateZ(-215deg) rotateY(219deg) translateX(100px) rotateZ(215deg);
opacity: 1;
}
100% {
transform: rotateZ(-215deg) rotateY(219deg) translateX(300px) rotateZ(215deg);
}
}
.c:nth-child(93) {
animation: orbit93 14s infinite;
animation-delay: 0.93s;
background-color: #ff3500;
}
@keyframes orbit93 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-198deg) rotateY(262deg) translateX(100px) rotateZ(198deg);
}
80% {
transform: rotateZ(-198deg) rotateY(262deg) translateX(100px) rotateZ(198deg);
opacity: 1;
}
100% {
transform: rotateZ(-198deg) rotateY(262deg) translateX(300px) rotateZ(198deg);
}
}
.c:nth-child(94) {
animation: orbit94 14s infinite;
animation-delay: 0.94s;
background-color: #ff3500;
}
@keyframes orbit94 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-16deg) rotateY(217deg) translateX(100px) rotateZ(16deg);
}
80% {
transform: rotateZ(-16deg) rotateY(217deg) translateX(100px) rotateZ(16deg);
opacity: 1;
}
100% {
transform: rotateZ(-16deg) rotateY(217deg) translateX(300px) rotateZ(16deg);
}
}
.c:nth-child(95) {
animation: orbit95 14s infinite;
animation-delay: 0.95s;
background-color: #ff3600;
}
@keyframes orbit95 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-96deg) rotateY(261deg) translateX(100px) rotateZ(96deg);
}
80% {
transform: rotateZ(-96deg) rotateY(261deg) translateX(100px) rotateZ(96deg);
opacity: 1;
}
100% {
transform: rotateZ(-96deg) rotateY(261deg) translateX(300px) rotateZ(96deg);
}
}
.c:nth-child(96) {
animation: orbit96 14s infinite;
animation-delay: 0.96s;
background-color: #ff3600;
}
@keyframes orbit96 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-118deg) rotateY(241deg) translateX(100px) rotateZ(118deg);
}
80% {
transform: rotateZ(-118deg) rotateY(241deg) translateX(100px) rotateZ(118deg);
opacity: 1;
}
100% {
transform: rotateZ(-118deg) rotateY(241deg) translateX(300px) rotateZ(118deg);
}
}
.c:nth-child(97) {
animation: orbit97 14s infinite;
animation-delay: 0.97s;
background-color: #ff3700;
}
@keyframes orbit97 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-157deg) rotateY(318deg) translateX(100px) rotateZ(157deg);
}
80% {
transform: rotateZ(-157deg) rotateY(318deg) translateX(100px) rotateZ(157deg);
opacity: 1;
}
100% {
transform: rotateZ(-157deg) rotateY(318deg) translateX(300px) rotateZ(157deg);
}
}
.c:nth-child(98) {
animation: orbit98 14s infinite;
animation-delay: 0.98s;
background-color: #ff3800;
}
@keyframes orbit98 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-270deg) rotateY(273deg) translateX(100px) rotateZ(270deg);
}
80% {
transform: rotateZ(-270deg) rotateY(273deg) translateX(100px) rotateZ(270deg);
opacity: 1;
}
100% {
transform: rotateZ(-270deg) rotateY(273deg) translateX(300px) rotateZ(270deg);
}
}
.c:nth-child(99) {
animation: orbit99 14s infinite;
animation-delay: 0.99s;
background-color: #ff3800;
}
@keyframes orbit99 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-67deg) rotateY(224deg) translateX(100px) rotateZ(67deg);
}
80% {
transform: rotateZ(-67deg) rotateY(224deg) translateX(100px) rotateZ(67deg);
opacity: 1;
}
100% {
transform: rotateZ(-67deg) rotateY(224deg) translateX(300px) rotateZ(67deg);
}
}
.c:nth-child(100) {
animation: orbit100 14s infinite;
animation-delay: 1s;
background-color: #ff3900;
}
@keyframes orbit100 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-349deg) rotateY(180deg) translateX(100px) rotateZ(349deg);
}
80% {
transform: rotateZ(-349deg) rotateY(180deg) translateX(100px) rotateZ(349deg);
opacity: 1;
}
100% {
transform: rotateZ(-349deg) rotateY(180deg) translateX(300px) rotateZ(349deg);
}
}
.c:nth-child(101) {
animation: orbit101 14s infinite;
animation-delay: 1.01s;
background-color: #ff3900;
}
@keyframes orbit101 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-151deg) rotateY(69deg) translateX(100px) rotateZ(151deg);
}
80% {
transform: rotateZ(-151deg) rotateY(69deg) translateX(100px) rotateZ(151deg);
opacity: 1;
}
100% {
transform: rotateZ(-151deg) rotateY(69deg) translateX(300px) rotateZ(151deg);
}
}
.c:nth-child(102) {
animation: orbit102 14s infinite;
animation-delay: 1.02s;
background-color: #ff3a00;
}
@keyframes orbit102 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-237deg) rotateY(132deg) translateX(100px) rotateZ(237deg);
}
80% {
transform: rotateZ(-237deg) rotateY(132deg) translateX(100px) rotateZ(237deg);
opacity: 1;
}
100% {
transform: rotateZ(-237deg) rotateY(132deg) translateX(300px) rotateZ(237deg);
}
}
.c:nth-child(103) {
animation: orbit103 14s infinite;
animation-delay: 1.03s;
background-color: #ff3a00;
}
@keyframes orbit103 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-209deg) rotateY(145deg) translateX(100px) rotateZ(209deg);
}
80% {
transform: rotateZ(-209deg) rotateY(145deg) translateX(100px) rotateZ(209deg);
opacity: 1;
}
100% {
transform: rotateZ(-209deg) rotateY(145deg) translateX(300px) rotateZ(209deg);
}
}
.c:nth-child(104) {
animation: orbit104 14s infinite;
animation-delay: 1.04s;
background-color: #ff3b00;
}
@keyframes orbit104 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-184deg) rotateY(86deg) translateX(100px) rotateZ(184deg);
}
80% {
transform: rotateZ(-184deg) rotateY(86deg) translateX(100px) rotateZ(184deg);
opacity: 1;
}
100% {
transform: rotateZ(-184deg) rotateY(86deg) translateX(300px) rotateZ(184deg);
}
}
.c:nth-child(105) {
animation: orbit105 14s infinite;
animation-delay: 1.05s;
background-color: #ff3c00;
}
@keyframes orbit105 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-168deg) rotateY(41deg) translateX(100px) rotateZ(168deg);
}
80% {
transform: rotateZ(-168deg) rotateY(41deg) translateX(100px) rotateZ(168deg);
opacity: 1;
}
100% {
transform: rotateZ(-168deg) rotateY(41deg) translateX(300px) rotateZ(168deg);
}
}
.c:nth-child(106) {
animation: orbit106 14s infinite;
animation-delay: 1.06s;
background-color: #ff3c00;
}
@keyframes orbit106 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-46deg) rotateY(66deg) translateX(100px) rotateZ(46deg);
}
80% {
transform: rotateZ(-46deg) rotateY(66deg) translateX(100px) rotateZ(46deg);
opacity: 1;
}
100% {
transform: rotateZ(-46deg) rotateY(66deg) translateX(300px) rotateZ(46deg);
}
}
.c:nth-child(107) {
animation: orbit107 14s infinite;
animation-delay: 1.07s;
background-color: #ff3d00;
}
@keyframes orbit107 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-215deg) rotateY(210deg) translateX(100px) rotateZ(215deg);
}
80% {
transform: rotateZ(-215deg) rotateY(210deg) translateX(100px) rotateZ(215deg);
opacity: 1;
}
100% {
transform: rotateZ(-215deg) rotateY(210deg) translateX(300px) rotateZ(215deg);
}
}
.c:nth-child(108) {
animation: orbit108 14s infinite;
animation-delay: 1.08s;
background-color: #ff3d00;
}
@keyframes orbit108 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-132deg) rotateY(243deg) translateX(100px) rotateZ(132deg);
}
80% {
transform: rotateZ(-132deg) rotateY(243deg) translateX(100px) rotateZ(132deg);
opacity: 1;
}
100% {
transform: rotateZ(-132deg) rotateY(243deg) translateX(300px) rotateZ(132deg);
}
}
.c:nth-child(109) {
animation: orbit109 14s infinite;
animation-delay: 1.09s;
background-color: #ff3e00;
}
@keyframes orbit109 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-276deg) rotateY(181deg) translateX(100px) rotateZ(276deg);
}
80% {
transform: rotateZ(-276deg) rotateY(181deg) translateX(100px) rotateZ(276deg);
opacity: 1;
}
100% {
transform: rotateZ(-276deg) rotateY(181deg) translateX(300px) rotateZ(276deg);
}
}
.c:nth-child(110) {
animation: orbit110 14s infinite;
animation-delay: 1.1s;
background-color: #ff3e00;
}
@keyframes orbit110 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-295deg) rotateY(332deg) translateX(100px) rotateZ(295deg);
}
80% {
transform: rotateZ(-295deg) rotateY(332deg) translateX(100px) rotateZ(295deg);
opacity: 1;
}
100% {
transform: rotateZ(-295deg) rotateY(332deg) translateX(300px) rotateZ(295deg);
}
}
.c:nth-child(111) {
animation: orbit111 14s infinite;
animation-delay: 1.11s;
background-color: #ff3f00;
}
@keyframes orbit111 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-339deg) rotateY(228deg) translateX(100px) rotateZ(339deg);
}
80% {
transform: rotateZ(-339deg) rotateY(228deg) translateX(100px) rotateZ(339deg);
opacity: 1;
}
100% {
transform: rotateZ(-339deg) rotateY(228deg) translateX(300px) rotateZ(339deg);
}
}
.c:nth-child(112) {
animation: orbit112 14s infinite;
animation-delay: 1.12s;
background-color: #ff3f00;
}
@keyframes orbit112 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-134deg) rotateY(50deg) translateX(100px) rotateZ(134deg);
}
80% {
transform: rotateZ(-134deg) rotateY(50deg) translateX(100px) rotateZ(134deg);
opacity: 1;
}
100% {
transform: rotateZ(-134deg) rotateY(50deg) translateX(300px) rotateZ(134deg);
}
}
.c:nth-child(113) {
animation: orbit113 14s infinite;
animation-delay: 1.13s;
background-color: #ff4000;
}
@keyframes orbit113 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-53deg) rotateY(223deg) translateX(100px) rotateZ(53deg);
}
80% {
transform: rotateZ(-53deg) rotateY(223deg) translateX(100px) rotateZ(53deg);
opacity: 1;
}
100% {
transform: rotateZ(-53deg) rotateY(223deg) translateX(300px) rotateZ(53deg);
}
}
.c:nth-child(114) {
animation: orbit114 14s infinite;
animation-delay: 1.14s;
background-color: #ff4100;
}
@keyframes orbit114 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-134deg) rotateY(7deg) translateX(100px) rotateZ(134deg);
}
80% {
transform: rotateZ(-134deg) rotateY(7deg) translateX(100px) rotateZ(134deg);
opacity: 1;
}
100% {
transform: rotateZ(-134deg) rotateY(7deg) translateX(300px) rotateZ(134deg);
}
}
.c:nth-child(115) {
animation: orbit115 14s infinite;
animation-delay: 1.15s;
background-color: #ff4100;
}
@keyframes orbit115 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-120deg) rotateY(186deg) translateX(100px) rotateZ(120deg);
}
80% {
transform: rotateZ(-120deg) rotateY(186deg) translateX(100px) rotateZ(120deg);
opacity: 1;
}
100% {
transform: rotateZ(-120deg) rotateY(186deg) translateX(300px) rotateZ(120deg);
}
}
.c:nth-child(116) {
animation: orbit116 14s infinite;
animation-delay: 1.16s;
background-color: #ff4200;
}
@keyframes orbit116 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-131deg) rotateY(141deg) translateX(100px) rotateZ(131deg);
}
80% {
transform: rotateZ(-131deg) rotateY(141deg) translateX(100px) rotateZ(131deg);
opacity: 1;
}
100% {
transform: rotateZ(-131deg) rotateY(141deg) translateX(300px) rotateZ(131deg);
}
}
.c:nth-child(117) {
animation: orbit117 14s infinite;
animation-delay: 1.17s;
background-color: #ff4200;
}
@keyframes orbit117 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-230deg) rotateY(1deg) translateX(100px) rotateZ(230deg);
}
80% {
transform: rotateZ(-230deg) rotateY(1deg) translateX(100px) rotateZ(230deg);
opacity: 1;
}
100% {
transform: rotateZ(-230deg) rotateY(1deg) translateX(300px) rotateZ(230deg);
}
}
.c:nth-child(118) {
animation: orbit118 14s infinite;
animation-delay: 1.18s;
background-color: #ff4300;
}
@keyframes orbit118 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-184deg) rotateY(333deg) translateX(100px) rotateZ(184deg);
}
80% {
transform: rotateZ(-184deg) rotateY(333deg) translateX(100px) rotateZ(184deg);
opacity: 1;
}
100% {
transform: rotateZ(-184deg) rotateY(333deg) translateX(300px) rotateZ(184deg);
}
}
.c:nth-child(119) {
animation: orbit119 14s infinite;
animation-delay: 1.19s;
background-color: #ff4300;
}
@keyframes orbit119 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-104deg) rotateY(95deg) translateX(100px) rotateZ(104deg);
}
80% {
transform: rotateZ(-104deg) rotateY(95deg) translateX(100px) rotateZ(104deg);
opacity: 1;
}
100% {
transform: rotateZ(-104deg) rotateY(95deg) translateX(300px) rotateZ(104deg);
}
}
.c:nth-child(120) {
animation: orbit120 14s infinite;
animation-delay: 1.2s;
background-color: #ff4400;
}
@keyframes orbit120 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-120deg) rotateY(204deg) translateX(100px) rotateZ(120deg);
}
80% {
transform: rotateZ(-120deg) rotateY(204deg) translateX(100px) rotateZ(120deg);
opacity: 1;
}
100% {
transform: rotateZ(-120deg) rotateY(204deg) translateX(300px) rotateZ(120deg);
}
}
.c:nth-child(121) {
animation: orbit121 14s infinite;
animation-delay: 1.21s;
background-color: orangered;
}
@keyframes orbit121 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-346deg) rotateY(336deg) translateX(100px) rotateZ(346deg);
}
80% {
transform: rotateZ(-346deg) rotateY(336deg) translateX(100px) rotateZ(346deg);
opacity: 1;
}
100% {
transform: rotateZ(-346deg) rotateY(336deg) translateX(300px) rotateZ(346deg);
}
}
.c:nth-child(122) {
animation: orbit122 14s infinite;
animation-delay: 1.22s;
background-color: orangered;
}
@keyframes orbit122 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-173deg) rotateY(50deg) translateX(100px) rotateZ(173deg);
}
80% {
transform: rotateZ(-173deg) rotateY(50deg) translateX(100px) rotateZ(173deg);
opacity: 1;
}
100% {
transform: rotateZ(-173deg) rotateY(50deg) translateX(300px) rotateZ(173deg);
}
}
.c:nth-child(123) {
animation: orbit123 14s infinite;
animation-delay: 1.23s;
background-color: #ff4600;
}
@keyframes orbit123 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-171deg) rotateY(266deg) translateX(100px) rotateZ(171deg);
}
80% {
transform: rotateZ(-171deg) rotateY(266deg) translateX(100px) rotateZ(171deg);
opacity: 1;
}
100% {
transform: rotateZ(-171deg) rotateY(266deg) translateX(300px) rotateZ(171deg);
}
}
.c:nth-child(124) {
animation: orbit124 14s infinite;
animation-delay: 1.24s;
background-color: #ff4600;
}
@keyframes orbit124 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-41deg) rotateY(45deg) translateX(100px) rotateZ(41deg);
}
80% {
transform: rotateZ(-41deg) rotateY(45deg) translateX(100px) rotateZ(41deg);
opacity: 1;
}
100% {
transform: rotateZ(-41deg) rotateY(45deg) translateX(300px) rotateZ(41deg);
}
}
.c:nth-child(125) {
animation: orbit125 14s infinite;
animation-delay: 1.25s;
background-color: #ff4700;
}
@keyframes orbit125 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-89deg) rotateY(54deg) translateX(100px) rotateZ(89deg);
}
80% {
transform: rotateZ(-89deg) rotateY(54deg) translateX(100px) rotateZ(89deg);
opacity: 1;
}
100% {
transform: rotateZ(-89deg) rotateY(54deg) translateX(300px) rotateZ(89deg);
}
}
.c:nth-child(126) {
animation: orbit126 14s infinite;
animation-delay: 1.26s;
background-color: #ff4700;
}
@keyframes orbit126 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-351deg) rotateY(126deg) translateX(100px) rotateZ(351deg);
}
80% {
transform: rotateZ(-351deg) rotateY(126deg) translateX(100px) rotateZ(351deg);
opacity: 1;
}
100% {
transform: rotateZ(-351deg) rotateY(126deg) translateX(300px) rotateZ(351deg);
}
}
.c:nth-child(127) {
animation: orbit127 14s infinite;
animation-delay: 1.27s;
background-color: #ff4800;
}
@keyframes orbit127 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-292deg) rotateY(196deg) translateX(100px) rotateZ(292deg);
}
80% {
transform: rotateZ(-292deg) rotateY(196deg) translateX(100px) rotateZ(292deg);
opacity: 1;
}
100% {
transform: rotateZ(-292deg) rotateY(196deg) translateX(300px) rotateZ(292deg);
}
}
.c:nth-child(128) {
animation: orbit128 14s infinite;
animation-delay: 1.28s;
background-color: #ff4900;
}
@keyframes orbit128 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-61deg) rotateY(355deg) translateX(100px) rotateZ(61deg);
}
80% {
transform: rotateZ(-61deg) rotateY(355deg) translateX(100px) rotateZ(61deg);
opacity: 1;
}
100% {
transform: rotateZ(-61deg) rotateY(355deg) translateX(300px) rotateZ(61deg);
}
}
.c:nth-child(129) {
animation: orbit129 14s infinite;
animation-delay: 1.29s;
background-color: #ff4900;
}
@keyframes orbit129 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-22deg) rotateY(312deg) translateX(100px) rotateZ(22deg);
}
80% {
transform: rotateZ(-22deg) rotateY(312deg) translateX(100px) rotateZ(22deg);
opacity: 1;
}
100% {
transform: rotateZ(-22deg) rotateY(312deg) translateX(300px) rotateZ(22deg);
}
}
.c:nth-child(130) {
animation: orbit130 14s infinite;
animation-delay: 1.3s;
background-color: #ff4a00;
}
@keyframes orbit130 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-238deg) rotateY(186deg) translateX(100px) rotateZ(238deg);
}
80% {
transform: rotateZ(-238deg) rotateY(186deg) translateX(100px) rotateZ(238deg);
opacity: 1;
}
100% {
transform: rotateZ(-238deg) rotateY(186deg) translateX(300px) rotateZ(238deg);
}
}
.c:nth-child(131) {
animation: orbit131 14s infinite;
animation-delay: 1.31s;
background-color: #ff4a00;
}
@keyframes orbit131 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-125deg) rotateY(126deg) translateX(100px) rotateZ(125deg);
}
80% {
transform: rotateZ(-125deg) rotateY(126deg) translateX(100px) rotateZ(125deg);
opacity: 1;
}
100% {
transform: rotateZ(-125deg) rotateY(126deg) translateX(300px) rotateZ(125deg);
}
}
.c:nth-child(132) {
animation: orbit132 14s infinite;
animation-delay: 1.32s;
background-color: #ff4b00;
}
@keyframes orbit132 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-116deg) rotateY(301deg) translateX(100px) rotateZ(116deg);
}
80% {
transform: rotateZ(-116deg) rotateY(301deg) translateX(100px) rotateZ(116deg);
opacity: 1;
}
100% {
transform: rotateZ(-116deg) rotateY(301deg) translateX(300px) rotateZ(116deg);
}
}
.c:nth-child(133) {
animation: orbit133 14s infinite;
animation-delay: 1.33s;
background-color: #ff4b00;
}
@keyframes orbit133 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-143deg) rotateY(230deg) translateX(100px) rotateZ(143deg);
}
80% {
transform: rotateZ(-143deg) rotateY(230deg) translateX(100px) rotateZ(143deg);
opacity: 1;
}
100% {
transform: rotateZ(-143deg) rotateY(230deg) translateX(300px) rotateZ(143deg);
}
}
.c:nth-child(134) {
animation: orbit134 14s infinite;
animation-delay: 1.34s;
background-color: #ff4c00;
}
@keyframes orbit134 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-20deg) rotateY(234deg) translateX(100px) rotateZ(20deg);
}
80% {
transform: rotateZ(-20deg) rotateY(234deg) translateX(100px) rotateZ(20deg);
opacity: 1;
}
100% {
transform: rotateZ(-20deg) rotateY(234deg) translateX(300px) rotateZ(20deg);
}
}
.c:nth-child(135) {
animation: orbit135 14s infinite;
animation-delay: 1.35s;
background-color: #ff4d00;
}
@keyframes orbit135 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-116deg) rotateY(75deg) translateX(100px) rotateZ(116deg);
}
80% {
transform: rotateZ(-116deg) rotateY(75deg) translateX(100px) rotateZ(116deg);
opacity: 1;
}
100% {
transform: rotateZ(-116deg) rotateY(75deg) translateX(300px) rotateZ(116deg);
}
}
.c:nth-child(136) {
animation: orbit136 14s infinite;
animation-delay: 1.36s;
background-color: #ff4d00;
}
@keyframes orbit136 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-196deg) rotateY(107deg) translateX(100px) rotateZ(196deg);
}
80% {
transform: rotateZ(-196deg) rotateY(107deg) translateX(100px) rotateZ(196deg);
opacity: 1;
}
100% {
transform: rotateZ(-196deg) rotateY(107deg) translateX(300px) rotateZ(196deg);
}
}
.c:nth-child(137) {
animation: orbit137 14s infinite;
animation-delay: 1.37s;
background-color: #ff4e00;
}
@keyframes orbit137 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-215deg) rotateY(210deg) translateX(100px) rotateZ(215deg);
}
80% {
transform: rotateZ(-215deg) rotateY(210deg) translateX(100px) rotateZ(215deg);
opacity: 1;
}
100% {
transform: rotateZ(-215deg) rotateY(210deg) translateX(300px) rotateZ(215deg);
}
}
.c:nth-child(138) {
animation: orbit138 14s infinite;
animation-delay: 1.38s;
background-color: #ff4e00;
}
@keyframes orbit138 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-148deg) rotateY(79deg) translateX(100px) rotateZ(148deg);
}
80% {
transform: rotateZ(-148deg) rotateY(79deg) translateX(100px) rotateZ(148deg);
opacity: 1;
}
100% {
transform: rotateZ(-148deg) rotateY(79deg) translateX(300px) rotateZ(148deg);
}
}
.c:nth-child(139) {
animation: orbit139 14s infinite;
animation-delay: 1.39s;
background-color: #ff4f00;
}
@keyframes orbit139 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-51deg) rotateY(15deg) translateX(100px) rotateZ(51deg);
}
80% {
transform: rotateZ(-51deg) rotateY(15deg) translateX(100px) rotateZ(51deg);
opacity: 1;
}
100% {
transform: rotateZ(-51deg) rotateY(15deg) translateX(300px) rotateZ(51deg);
}
}
.c:nth-child(140) {
animation: orbit140 14s infinite;
animation-delay: 1.4s;
background-color: #ff4f00;
}
@keyframes orbit140 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-358deg) rotateY(220deg) translateX(100px) rotateZ(358deg);
}
80% {
transform: rotateZ(-358deg) rotateY(220deg) translateX(100px) rotateZ(358deg);
opacity: 1;
}
100% {
transform: rotateZ(-358deg) rotateY(220deg) translateX(300px) rotateZ(358deg);
}
}
.c:nth-child(141) {
animation: orbit141 14s infinite;
animation-delay: 1.41s;
background-color: #ff5000;
}
@keyframes orbit141 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-246deg) rotateY(107deg) translateX(100px) rotateZ(246deg);
}
80% {
transform: rotateZ(-246deg) rotateY(107deg) translateX(100px) rotateZ(246deg);
opacity: 1;
}
100% {
transform: rotateZ(-246deg) rotateY(107deg) translateX(300px) rotateZ(246deg);
}
}
.c:nth-child(142) {
animation: orbit142 14s infinite;
animation-delay: 1.42s;
background-color: #ff5000;
}
@keyframes orbit142 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-357deg) rotateY(39deg) translateX(100px) rotateZ(357deg);
}
80% {
transform: rotateZ(-357deg) rotateY(39deg) translateX(100px) rotateZ(357deg);
opacity: 1;
}
100% {
transform: rotateZ(-357deg) rotateY(39deg) translateX(300px) rotateZ(357deg);
}
}
.c:nth-child(143) {
animation: orbit143 14s infinite;
animation-delay: 1.43s;
background-color: #ff5100;
}
@keyframes orbit143 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-267deg) rotateY(276deg) translateX(100px) rotateZ(267deg);
}
80% {
transform: rotateZ(-267deg) rotateY(276deg) translateX(100px) rotateZ(267deg);
opacity: 1;
}
100% {
transform: rotateZ(-267deg) rotateY(276deg) translateX(300px) rotateZ(267deg);
}
}
.c:nth-child(144) {
animation: orbit144 14s infinite;
animation-delay: 1.44s;
background-color: #ff5200;
}
@keyframes orbit144 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-338deg) rotateY(26deg) translateX(100px) rotateZ(338deg);
}
80% {
transform: rotateZ(-338deg) rotateY(26deg) translateX(100px) rotateZ(338deg);
opacity: 1;
}
100% {
transform: rotateZ(-338deg) rotateY(26deg) translateX(300px) rotateZ(338deg);
}
}
.c:nth-child(145) {
animation: orbit145 14s infinite;
animation-delay: 1.45s;
background-color: #ff5200;
}
@keyframes orbit145 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-262deg) rotateY(142deg) translateX(100px) rotateZ(262deg);
}
80% {
transform: rotateZ(-262deg) rotateY(142deg) translateX(100px) rotateZ(262deg);
opacity: 1;
}
100% {
transform: rotateZ(-262deg) rotateY(142deg) translateX(300px) rotateZ(262deg);
}
}
.c:nth-child(146) {
animation: orbit146 14s infinite;
animation-delay: 1.46s;
background-color: #ff5300;
}
@keyframes orbit146 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-200deg) rotateY(180deg) translateX(100px) rotateZ(200deg);
}
80% {
transform: rotateZ(-200deg) rotateY(180deg) translateX(100px) rotateZ(200deg);
opacity: 1;
}
100% {
transform: rotateZ(-200deg) rotateY(180deg) translateX(300px) rotateZ(200deg);
}
}
.c:nth-child(147) {
animation: orbit147 14s infinite;
animation-delay: 1.47s;
background-color: #ff5300;
}
@keyframes orbit147 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-141deg) rotateY(67deg) translateX(100px) rotateZ(141deg);
}
80% {
transform: rotateZ(-141deg) rotateY(67deg) translateX(100px) rotateZ(141deg);
opacity: 1;
}
100% {
transform: rotateZ(-141deg) rotateY(67deg) translateX(300px) rotateZ(141deg);
}
}
.c:nth-child(148) {
animation: orbit148 14s infinite;
animation-delay: 1.48s;
background-color: #ff5400;
}
@keyframes orbit148 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-340deg) rotateY(48deg) translateX(100px) rotateZ(340deg);
}
80% {
transform: rotateZ(-340deg) rotateY(48deg) translateX(100px) rotateZ(340deg);
opacity: 1;
}
100% {
transform: rotateZ(-340deg) rotateY(48deg) translateX(300px) rotateZ(340deg);
}
}
.c:nth-child(149) {
animation: orbit149 14s infinite;
animation-delay: 1.49s;
background-color: #ff5400;
}
@keyframes orbit149 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-67deg) rotateY(68deg) translateX(100px) rotateZ(67deg);
}
80% {
transform: rotateZ(-67deg) rotateY(68deg) translateX(100px) rotateZ(67deg);
opacity: 1;
}
100% {
transform: rotateZ(-67deg) rotateY(68deg) translateX(300px) rotateZ(67deg);
}
}
.c:nth-child(150) {
animation: orbit150 14s infinite;
animation-delay: 1.5s;
background-color: #ff5500;
}
@keyframes orbit150 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-222deg) rotateY(295deg) translateX(100px) rotateZ(222deg);
}
80% {
transform: rotateZ(-222deg) rotateY(295deg) translateX(100px) rotateZ(222deg);
opacity: 1;
}
100% {
transform: rotateZ(-222deg) rotateY(295deg) translateX(300px) rotateZ(222deg);
}
}
.c:nth-child(151) {
animation: orbit151 14s infinite;
animation-delay: 1.51s;
background-color: #ff5600;
}
@keyframes orbit151 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-330deg) rotateY(236deg) translateX(100px) rotateZ(330deg);
}
80% {
transform: rotateZ(-330deg) rotateY(236deg) translateX(100px) rotateZ(330deg);
opacity: 1;
}
100% {
transform: rotateZ(-330deg) rotateY(236deg) translateX(300px) rotateZ(330deg);
}
}
.c:nth-child(152) {
animation: orbit152 14s infinite;
animation-delay: 1.52s;
background-color: #ff5600;
}
@keyframes orbit152 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-208deg) rotateY(343deg) translateX(100px) rotateZ(208deg);
}
80% {
transform: rotateZ(-208deg) rotateY(343deg) translateX(100px) rotateZ(208deg);
opacity: 1;
}
100% {
transform: rotateZ(-208deg) rotateY(343deg) translateX(300px) rotateZ(208deg);
}
}
.c:nth-child(153) {
animation: orbit153 14s infinite;
animation-delay: 1.53s;
background-color: #ff5700;
}
@keyframes orbit153 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-220deg) rotateY(220deg) translateX(100px) rotateZ(220deg);
}
80% {
transform: rotateZ(-220deg) rotateY(220deg) translateX(100px) rotateZ(220deg);
opacity: 1;
}
100% {
transform: rotateZ(-220deg) rotateY(220deg) translateX(300px) rotateZ(220deg);
}
}
.c:nth-child(154) {
animation: orbit154 14s infinite;
animation-delay: 1.54s;
background-color: #ff5700;
}
@keyframes orbit154 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-156deg) rotateY(42deg) translateX(100px) rotateZ(156deg);
}
80% {
transform: rotateZ(-156deg) rotateY(42deg) translateX(100px) rotateZ(156deg);
opacity: 1;
}
100% {
transform: rotateZ(-156deg) rotateY(42deg) translateX(300px) rotateZ(156deg);
}
}
.c:nth-child(155) {
animation: orbit155 14s infinite;
animation-delay: 1.55s;
background-color: #ff5800;
}
@keyframes orbit155 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-59deg) rotateY(287deg) translateX(100px) rotateZ(59deg);
}
80% {
transform: rotateZ(-59deg) rotateY(287deg) translateX(100px) rotateZ(59deg);
opacity: 1;
}
100% {
transform: rotateZ(-59deg) rotateY(287deg) translateX(300px) rotateZ(59deg);
}
}
.c:nth-child(156) {
animation: orbit156 14s infinite;
animation-delay: 1.56s;
background-color: #ff5800;
}
@keyframes orbit156 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-252deg) rotateY(16deg) translateX(100px) rotateZ(252deg);
}
80% {
transform: rotateZ(-252deg) rotateY(16deg) translateX(100px) rotateZ(252deg);
opacity: 1;
}
100% {
transform: rotateZ(-252deg) rotateY(16deg) translateX(300px) rotateZ(252deg);
}
}
.c:nth-child(157) {
animation: orbit157 14s infinite;
animation-delay: 1.57s;
background-color: #ff5900;
}
@keyframes orbit157 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-14deg) rotateY(35deg) translateX(100px) rotateZ(14deg);
}
80% {
transform: rotateZ(-14deg) rotateY(35deg) translateX(100px) rotateZ(14deg);
opacity: 1;
}
100% {
transform: rotateZ(-14deg) rotateY(35deg) translateX(300px) rotateZ(14deg);
}
}
.c:nth-child(158) {
animation: orbit158 14s infinite;
animation-delay: 1.58s;
background-color: #ff5a00;
}
@keyframes orbit158 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-356deg) rotateY(194deg) translateX(100px) rotateZ(356deg);
}
80% {
transform: rotateZ(-356deg) rotateY(194deg) translateX(100px) rotateZ(356deg);
opacity: 1;
}
100% {
transform: rotateZ(-356deg) rotateY(194deg) translateX(300px) rotateZ(356deg);
}
}
.c:nth-child(159) {
animation: orbit159 14s infinite;
animation-delay: 1.59s;
background-color: #ff5a00;
}
@keyframes orbit159 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-90deg) rotateY(304deg) translateX(100px) rotateZ(90deg);
}
80% {
transform: rotateZ(-90deg) rotateY(304deg) translateX(100px) rotateZ(90deg);
opacity: 1;
}
100% {
transform: rotateZ(-90deg) rotateY(304deg) translateX(300px) rotateZ(90deg);
}
}
.c:nth-child(160) {
animation: orbit160 14s infinite;
animation-delay: 1.6s;
background-color: #ff5b00;
}
@keyframes orbit160 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-107deg) rotateY(259deg) translateX(100px) rotateZ(107deg);
}
80% {
transform: rotateZ(-107deg) rotateY(259deg) translateX(100px) rotateZ(107deg);
opacity: 1;
}
100% {
transform: rotateZ(-107deg) rotateY(259deg) translateX(300px) rotateZ(107deg);
}
}
.c:nth-child(161) {
animation: orbit161 14s infinite;
animation-delay: 1.61s;
background-color: #ff5b00;
}
@keyframes orbit161 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-276deg) rotateY(306deg) translateX(100px) rotateZ(276deg);
}
80% {
transform: rotateZ(-276deg) rotateY(306deg) translateX(100px) rotateZ(276deg);
opacity: 1;
}
100% {
transform: rotateZ(-276deg) rotateY(306deg) translateX(300px) rotateZ(276deg);
}
}
.c:nth-child(162) {
animation: orbit162 14s infinite;
animation-delay: 1.62s;
background-color: #ff5c00;
}
@keyframes orbit162 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-75deg) rotateY(229deg) translateX(100px) rotateZ(75deg);
}
80% {
transform: rotateZ(-75deg) rotateY(229deg) translateX(100px) rotateZ(75deg);
opacity: 1;
}
100% {
transform: rotateZ(-75deg) rotateY(229deg) translateX(300px) rotateZ(75deg);
}
}
.c:nth-child(163) {
animation: orbit163 14s infinite;
animation-delay: 1.63s;
background-color: #ff5c00;
}
@keyframes orbit163 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-32deg) rotateY(350deg) translateX(100px) rotateZ(32deg);
}
80% {
transform: rotateZ(-32deg) rotateY(350deg) translateX(100px) rotateZ(32deg);
opacity: 1;
}
100% {
transform: rotateZ(-32deg) rotateY(350deg) translateX(300px) rotateZ(32deg);
}
}
.c:nth-child(164) {
animation: orbit164 14s infinite;
animation-delay: 1.64s;
background-color: #ff5d00;
}
@keyframes orbit164 {
20% {
opacity: 1;
}
30% {
transform: rotateZ(-349deg) rotateY(231deg) translateX(100px) rotateZ(349deg);
}
80% {
transform: rotateZ(-349deg) rotateY(231deg) translateX(100px) rotateZ(349.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0