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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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