3d 球运动动画
代码语言：html
所属分类：三维
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Only CSS: Particles Following Camera 1</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
background: black;
background: radial-gradient(ellipse atbottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
-webkit-perspective: 600px;
perspective: 600px;
}
div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.particles {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
.camera.-x {
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
}
.camerafollow.-x {
-webkit-transform: rotateX(20deg);
transform: rotateX(20deg);
}
.part {
position: absolute;
top: 50%;
left: calc(50% + 200px);
}
.graphic {
position: absolute;
width: 12px;
height: 12px;
background: linear-gradient(0deg, #555555 0%, white 100%);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.graphic::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 50px;
border-radius: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 100%);
}
.rotate {
animation: rotation 10000ms linear infinite reverse;
}
.rotatefollow {
-webkit-animation: rotation 10000ms linear infinite;
animation: rotation 10000ms linear infinite;
}
.particle:nth-child(1) .part {
left: calc(50% + 246px);
}
.particle:nth-child(1) .rotate,
.particle:nth-child(1) .rotatefollow {
-webkit-animation-delay: -52071ms;
animation-delay: -52071ms;
-webkit-animation-duration: 6150ms;
animation-duration: 6150ms;
}
.particle:nth-child(1) .graphic {
background: linear-gradient(0deg, #7a49c2 0%, #deadff 100%);
-webkit-animation: amplitude 1000ms -52071ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -52071ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(1) .graphic::before {
background: linear-gradient(0deg, rgba(172, 123, 244, 0) 50%, rgba(172, 123, 244, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -52071ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -52071ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(2) .part {
left: calc(50% + 207px);
}
.particle:nth-child(2) .rotate,
.particle:nth-child(2) .rotatefollow {
-webkit-animation-delay: -64895ms;
animation-delay: -64895ms;
-webkit-animation-duration: 9934ms;
animation-duration: 9934ms;
}
.particle:nth-child(2) .graphic {
background: linear-gradient(0deg, #347077 0%, #98d4db 100%);
-webkit-animation: amplitude 1000ms -64895ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -64895ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(2) .graphic::before {
background: linear-gradient(0deg, rgba(102, 162, 169, 0) 50%, rgba(102, 162, 169, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -64895ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -64895ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(3) .part {
left: calc(50% + 276px);
}
.particle:nth-child(3) .rotate,
.particle:nth-child(3) .rotatefollow {
-webkit-animation-delay: -47358ms;
animation-delay: -47358ms;
-webkit-animation-duration: 14973ms;
animation-duration: 14973ms;
}
.particle:nth-child(3) .graphic {
background: linear-gradient(0deg, #8c3b40 0%, #f09fa4 100%);
-webkit-animation: amplitude 1000ms -47358ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -47358ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(3) .graphic::before {
background: linear-gradient(0deg, rgba(190, 109, 114, 0) 50%, rgba(190, 109, 114, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -47358ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -47358ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(4) .part {
left: calc(50% + 221px);
}
.particle:nth-child(4) .rotate,
.particle:nth-child(4) .rotatefollow {
-webkit-animation-delay: -101046ms;
animation-delay: -101046ms;
-webkit-animation-duration: 11899ms;
animation-duration: 11899ms;
}
.particle:nth-child(4) .graphic {
background: linear-gradient(0deg, #4c5ca7 0%, #b0c0ff 100%);
-webkit-animation: amplitude 1000ms -101046ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -101046ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(4) .graphic::before {
background: linear-gradient(0deg, rgba(126, 142, 217, 0) 50%, rgba(126, 142, 217, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -101046ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -101046ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(5) .part {
left: calc(50% + 238px);
}
.particle:nth-child(5) .rotate,
.particle:nth-child(5) .rotatefollow {
-webkit-animation-delay: -82297ms;
animation-delay: -82297ms;
-webkit-animation-duration: 5164ms;
animation-duration: 5164ms;
}
.particle:nth-child(5) .graphic {
background: linear-gradient(0deg, #4148c8 0%, #a5acff 100%);
-webkit-animation: amplitude 1000ms -82297ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -82297ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(5) .graphic::before {
background: linear-gradient(0deg, rgba(115, 122, 250, 0) 50%, rgba(115, 122, 250, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -82297ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -82297ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(6) .part {
left: calc(50% + 273px);
}
.particle:nth-child(6) .rotate,
.particle:nth-child(6) .rotatefollow {
-webkit-animation-delay: -85118ms;
animation-delay: -85118ms;
-webkit-animation-duration: 6701ms;
animation-duration: 6701ms;
}
.particle:nth-child(6) .graphic {
background: linear-gradient(0deg, #69663d 0%, #cdcaa1 100%);
-webkit-animation: amplitude 1000ms -85118ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -85118ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(6) .graphic::before {
background: linear-gradient(0deg, rgba(155, 152, 111, 0) 50%, rgba(155, 152, 111, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -85118ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -85118ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(7) .part {
left: calc(50% + 273px);
}
.particle:nth-child(7) .rotate,
.particle:nth-child(7) .rotatefollow {
-webkit-animation-delay: -89092ms;
animation-delay: -89092ms;
-webkit-animation-duration: 7977ms;
animation-duration: 7977ms;
}
.particle:nth-child(7) .graphic {
background: linear-gradient(0deg, #5c3e33 0%, #c0a297 100%);
-webkit-animation: amplitude 1000ms -89092ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -89092ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(7) .graphic::before {
background: linear-gradient(0deg, rgba(142, 112, 101, 0) 50%, rgba(142, 112, 101, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -89092ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -89092ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(8) .part {
left: calc(50% + 244px);
}
.particle:nth-child(8) .rotate,
.particle:nth-child(8) .rotatefollow {
-webkit-animation-delay: -20473ms;
animation-delay: -20473ms;
-webkit-animation-duration: 7177ms;
animation-duration: 7177ms;
}
.particle:nth-child(8) .graphic {
background: linear-gradient(0deg, #5e3ec5 0%, #c2a2ff 100%);
-webkit-animation: amplitude 1000ms -20473ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -20473ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(8) .graphic::before {
background: linear-gradient(0deg, rgba(144, 112, 247, 0) 50%, rgba(144, 112, 247, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -20473ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -20473ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(9) .part {
left: calc(50% + 256px);
}
.particle:nth-child(9) .rotate,
.particle:nth-child(9) .rotatefollow {
-webkit-animation-delay: -81714ms;
animation-delay: -81714ms;
-webkit-animation-duration: 7742ms;
animation-duration: 7742ms;
}
.particle:nth-child(9) .graphic {
background: linear-gradient(0deg, #3d80c2 0%, #a1e4ff 100%);
-webkit-animation: amplitude 1000ms -81714ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -81714ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(9) .graphic::before {
background: linear-gradient(0deg, rgba(111, 178, 244, 0) 50%, rgba(111, 178, 244, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -81714ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -81714ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(10) .part {
left: calc(50% + 185px);
}
.particle:nth-child(10) .rotate,
.particle:nth-child(10) .rotatefollow {
-webkit-animation-delay: -70445ms;
animation-delay: -70445ms;
-webkit-animation-duration: 11897ms;
animation-duration: 11897ms;
}
.particle:nth-child(10) .graphic {
background: linear-gradient(0deg, #41803c 0%, #a5e4a0 100%);
-webkit-animation: amplitude 1000ms -70445ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -70445ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(10) .graphic::before {
background: linear-gradient(0deg, rgba(115, 178, 110, 0) 50%, rgba(115, 178, 110, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -70445ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -70445ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(11) .part {
left: calc(50% + 191px);
}
.particle:nth-child(11) .rotate,
.particle:nth-child(11) .rotatefollow {
-webkit-animation-delay: -35567ms;
animation-delay: -35567ms;
-webkit-animation-duration: 8122ms;
animation-duration: 8122ms;
}
.particle:nth-child(11) .graphic {
background: linear-gradient(0deg, #474371 0%, #aba7d5 100%);
-webkit-animation: amplitude 1000ms -35567ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -35567ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(11) .graphic::before {
background: linear-gradient(0deg, rgba(121, 117, 163, 0) 50%, rgba(121, 117, 163, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -35567ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -35567ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(12) .part {
left: calc(50% + 279px);
}
.particle:nth-child(12) .rotate,
.particle:nth-child(12) .rotatefollow {
-webkit-animation-delay: -110181ms;
animation-delay: -110181ms;
-webkit-animation-duration: 11141ms;
animation-duration: 11141ms;
}
.particle:nth-child(12) .graphic {
background: linear-gradient(0deg, #55624a 0%, #b9c6ae 100%);
-webkit-animation: amplitude 1000ms -110181ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -110181ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(12) .graphic::before {
background: linear-gradient(0deg, rgba(135, 148, 124, 0) 50%, rgba(135, 148, 124, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -110181ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -110181ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(13) .part {
left: calc(50% + 183px);
}
.particle:nth-child(13) .rotate,
.particle:nth-child(13) .rotatefollow {
-webkit-animation-delay: -63177ms;
animation-delay: -63177ms;
-webkit-animation-duration: 6483ms;
animation-duration: 6483ms;
}
.particle:nth-child(13) .graphic {
background: linear-gradient(0deg, #365770 0%, #9abbd4 100%);
-webkit-animation: amplitude 1000ms -63177ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -63177ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(13) .graphic::before {
background: linear-gradient(0deg, rgba(104, 137, 162, 0) 50%, rgba(104, 137, 162, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -63177ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -63177ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(14) .part {
left: calc(50% + 206px);
}
.particle:nth-child(14) .rotate,
.particle:nth-child(14) .rotatefollow {
-webkit-animation-delay: -60404ms;
animation-delay: -60404ms;
-webkit-animation-duration: 12103ms;
animation-duration: 12103ms;
}
.particle:nth-child(14) .graphic {
background: linear-gradient(0deg, #7d7f4a 0%, #e1e3ae 100%);
-webkit-animation: amplitude 1000ms -60404ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -60404ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(14) .graphic::before {
background: linear-gradient(0deg, rgba(175, 177, 124, 0) 50%, rgba(175, 177, 124, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -60404ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -60404ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(15) .part {
left: calc(50% + 241px);
}
.particle:nth-child(15) .rotate,
.particle:nth-child(15) .rotatefollow {
-webkit-animation-delay: -100742ms;
animation-delay: -100742ms;
-webkit-animation-duration: 12907ms;
animation-duration: 12907ms;
}
.particle:nth-child(15) .graphic {
background: linear-gradient(0deg, #7443b6 0%, #d8a7ff 100%);
-webkit-animation: amplitude 1000ms -100742ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -100742ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(15) .graphic::before {
background: linear-gradient(0deg, rgba(166, 117, 232, 0) 50%, rgba(166, 117, 232, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -100742ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -100742ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(16) .part {
left: calc(50% + 260px);
}
.particle:nth-child(16) .rotate,
.particle:nth-child(16) .rotatefollow {
-webkit-animation-delay: -114038ms;
animation-delay: -114038ms;
-webkit-animation-duration: 12564ms;
animation-duration: 12564ms;
}
.particle:nth-child(16) .graphic {
background: linear-gradient(0deg, #8365c6 0%, #e7c9ff 100%);
-webkit-animation: amplitude 1000ms -114038ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -114038ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(16) .graphic::before {
background: linear-gradient(0deg, rgba(181, 151, 248, 0) 50%, rgba(181, 151, 248, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -114038ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -114038ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(17) .part {
left: calc(50% + 200px);
}
.particle:nth-child(17) .rotate,
.particle:nth-child(17) .rotatefollow {
-webkit-animation-delay: -99201ms;
animation-delay: -99201ms;
-webkit-animation-duration: 11990ms;
animation-duration: 11990ms;
}
.particle:nth-child(17) .graphic {
background: linear-gradient(0deg, #3d75ae 0%, #a1d9ff 100%);
-webkit-animation: amplitude 1000ms -99201ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -99201ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(17) .graphic::before {
background: linear-gradient(0deg, rgba(111, 167, 224, 0) 50%, rgba(111, 167, 224, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -99201ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -99201ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(18) .part {
left: calc(50% + 239px);
}
.particle:nth-child(18) .rotate,
.particle:nth-child(18) .rotatefollow {
-webkit-animation-delay: -52933ms;
animation-delay: -52933ms;
-webkit-animation-duration: 12634ms;
animation-duration: 12634ms;
}
.particle:nth-child(18) .graphic {
background: linear-gradient(0deg, #8d7d7c 0%, #f1e1e0 100%);
-webkit-animation: amplitude 1000ms -52933ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -52933ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(18) .graphic::before {
background: linear-gradient(0deg, rgba(191, 175, 174, 0) 50%, rgba(191, 175, 174, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -52933ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -52933ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(19) .part {
left: calc(50% + 269px);
}
.particle:nth-child(19) .rotate,
.particle:nth-child(19) .rotatefollow {
-webkit-animation-delay: -17207ms;
animation-delay: -17207ms;
-webkit-animation-duration: 10148ms;
animation-duration: 10148ms;
}
.particle:nth-child(19) .graphic {
background: linear-gradient(0deg, #7b665e 0%, #dfcac2 100%);
-webkit-animation: amplitude 1000ms -17207ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -17207ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(19) .graphic::before {
background: linear-gradient(0deg, rgba(173, 152, 144, 0) 50%, rgba(173, 152, 144, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -17207ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -17207ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(20) .part {
left: calc(50% + 211px);
}
.particle:nth-child(20) .rotate,
.particle:nth-child(20) .rotatefollow {
-webkit-animation-delay: -37247ms;
animation-delay: -37247ms;
-webkit-animation-duration: 7126ms;
animation-duration: 7126ms;
}
.particle:nth-child(20) .graphic {
background: linear-gradient(0deg, #6b4374 0%, #cfa7d8 100%);
-webkit-animation: amplitude 1000ms -37247ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -37247ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(20) .graphic::before {
background: linear-gradient(0deg, rgba(157, 117, 166, 0) 50%, rgba(157, 117, 166, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -37247ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -37247ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(21) .part {
left: calc(50% + 193px);
}
.particle:nth-child(21) .rotate,
.particle:nth-child(21) .rotatefollow {
-webkit-animation-delay: -24197ms;
animation-delay: -24197ms;
-webkit-animation-duration: 9156ms;
animation-duration: 9156ms;
}
.particle:nth-child(21) .graphic {
background: linear-gradient(0deg, #6e6e7f 0%, #d2d2e3 100%);
-webkit-animation: amplitude 1000ms -24197ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -24197ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(21) .graphic::before {
background: linear-gradient(0deg, rgba(160, 160, 177, 0) 50%, rgba(160, 160, 177, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -24197ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -24197ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(22) .part {
left: calc(50% + 235px);
}
.particle:nth-child(22) .rotate,
.particle:nth-child(22) .rotatefollow {
-webkit-animation-delay: -114219ms;
animation-delay: -114219ms;
-webkit-animation-duration: 12635ms;
animation-duration: 12635ms;
}
.particle:nth-child(22) .graphic {
background: linear-gradient(0deg, #3f3f33 0%, #a3a397 100%);
-webkit-animation: amplitude 1000ms -114219ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -114219ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(22) .graphic::before {
background: linear-gradient(0deg, rgba(113, 113, 101, 0) 50%, rgba(113, 113, 101, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -114219ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -114219ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(23) .part {
left: calc(50% + 257px);
}
.particle:nth-child(23) .rotate,
.particle:nth-child(23) .rotatefollow {
-webkit-animation-delay: -70745ms;
animation-delay: -70745ms;
-webkit-animation-duration: 6203ms;
animation-duration: 6203ms;
}
.particle:nth-child(23) .graphic {
background: linear-gradient(0deg, #55937e 0%, #b9f7e2 100%);
-webkit-animation: amplitude 1000ms -70745ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -70745ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(23) .graphic::before {
background: linear-gradient(0deg, rgba(135, 197, 176, 0) 50%, rgba(135, 197, 176, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -70745ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -70745ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(24) .part {
left: calc(50% + 279px);
}
.particle:nth-child(24) .rotate,
.particle:nth-child(24) .rotatefollow {
-webkit-animation-delay: -27131ms;
animation-delay: -27131ms;
-webkit-animation-duration: 9061ms;
animation-duration: 9061ms;
}
.particle:nth-child(24) .graphic {
background: linear-gradient(0deg, #774fb8 0%, #dbb3ff 100%);
-webkit-animation: amplitude 1000ms -27131ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -27131ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(24) .graphic::before {
background: linear-gradient(0deg, rgba(169, 129, 234, 0) 50%, rgba(169, 129, 234, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -27131ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -27131ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(25) .part {
left: calc(50% + 251px);
}
.particle:nth-child(25) .rotate,
.particle:nth-child(25) .rotatefollow {
-webkit-animation-delay: -24721ms;
animation-delay: -24721ms;
-webkit-animation-duration: 14051ms;
animation-duration: 14051ms;
}
.particle:nth-child(25) .graphic {
background: linear-gradient(0deg, #345da2 0%, #98c1ff 100%);
-webkit-animation: amplitude 1000ms -24721ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -24721ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(25) .graphic::before {
background: linear-gradient(0deg, rgba(102, 143, 212, 0) 50%, rgba(102, 143, 212, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -24721ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -24721ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(26) .part {
left: calc(50% + 242px);
}
.particle:nth-child(26) .rotate,
.particle:nth-child(26) .rotatefollow {
-webkit-animation-delay: -67697ms;
animation-delay: -67697ms;
-webkit-animation-duration: 12447ms;
animation-duration: 12447ms;
}
.particle:nth-child(26) .graphic {
background: linear-gradient(0deg, #52817b 0%, #b6e5df 100%);
-webkit-animation: amplitude 1000ms -67697ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -67697ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(26) .graphic::before {
background: linear-gradient(0deg, rgba(132, 179, 173, 0) 50%, rgba(132, 179, 173, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -67697ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -67697ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(27) .part {
left: calc(50% + 259px);
}
.particle:nth-child(27) .rotate,
.particle:nth-child(27) .rotatefollow {
-webkit-animation-delay: -100860ms;
animation-delay: -100860ms;
-webkit-animation-duration: 10605ms;
animation-duration: 10605ms;
}
.particle:nth-child(27) .graphic {
background: linear-gradient(0deg, #744359 0%, #d8a7bd 100%);
-webkit-animation: amplitude 1000ms -100860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -100860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(27) .graphic::before {
background: linear-gradient(0deg, rgba(166, 117, 139, 0) 50%, rgba(166, 117, 139, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -100860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -100860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(28) .part {
left: calc(50% + 270px);
}
.particle:nth-child(28) .rotate,
.particle:nth-child(28) .rotatefollow {
-webkit-animation-delay: -100301ms;
animation-delay: -100301ms;
-webkit-animation-duration: 10916ms;
animation-duration: 10916ms;
}
.particle:nth-child(28) .graphic {
background: linear-gradient(0deg, #795738 0%, #ddbb9c 100%);
-webkit-animation: amplitude 1000ms -100301ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -100301ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(28) .graphic::before {
background: linear-gradient(0deg, rgba(171, 137, 106, 0) 50%, rgba(171, 137, 106, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -100301ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -100301ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(29) .part {
left: calc(50% + 255px);
}
.particle:nth-child(29) .rotate,
.particle:nth-child(29) .rotatefollow {
-webkit-animation-delay: -91795ms;
animation-delay: -91795ms;
-webkit-animation-duration: 5094ms;
animation-duration: 5094ms;
}
.particle:nth-child(29) .graphic {
background: linear-gradient(0deg, #768860 0%, #daecc4 100%);
-webkit-animation: amplitude 1000ms -91795ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -91795ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(29) .graphic::before {
background: linear-gradient(0deg, rgba(168, 186, 146, 0) 50%, rgba(168, 186, 146, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -91795ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -91795ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(30) .part {
left: calc(50% + 264px);
}
.particle:nth-child(30) .rotate,
.particle:nth-child(30) .rotatefollow {
-webkit-animation-delay: -61397ms;
animation-delay: -61397ms;
-webkit-animation-duration: 5308ms;
animation-duration: 5308ms;
}
.particle:nth-child(30) .graphic {
background: linear-gradient(0deg, #928451 0%, #f6e8b5 100%);
-webkit-animation: amplitude 1000ms -61397ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -61397ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(30) .graphic::before {
background: linear-gradient(0deg, rgba(196, 182, 131, 0) 50%, rgba(196, 182, 131, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -61397ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -61397ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(31) .part {
left: calc(50% + 271px);
}
.particle:nth-child(31) .rotate,
.particle:nth-child(31) .rotatefollow {
-webkit-animation-delay: -29430ms;
animation-delay: -29430ms;
-webkit-animation-duration: 12619ms;
animation-duration: 12619ms;
}
.particle:nth-child(31) .graphic {
background: linear-gradient(0deg, #673ca7 0%, #cba0ff 100%);
-webkit-animation: amplitude 1000ms -29430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -29430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(31) .graphic::before {
background: linear-gradient(0deg, rgba(153, 110, 217, 0) 50%, rgba(153, 110, 217, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -29430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -29430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(32) .part {
left: calc(50% + 242px);
}
.particle:nth-child(32) .rotate,
.particle:nth-child(32) .rotatefollow {
-webkit-animation-delay: -114700ms;
animation-delay: -114700ms;
-webkit-animation-duration: 13997ms;
animation-duration: 13997ms;
}
.particle:nth-child(32) .graphic {
background: linear-gradient(0deg, #8e96b7 0%, #f2faff 100%);
-webkit-animation: amplitude 1000ms -114700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -114700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(32) .graphic::before {
background: linear-gradient(0deg, rgba(192, 200, 233, 0) 50%, rgba(192, 200, 233, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -114700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -114700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(33) .part {
left: calc(50% + 241px);
}
.particle:nth-child(33) .rotate,
.particle:nth-child(33) .rotatefollow {
-webkit-animation-delay: -35331ms;
animation-delay: -35331ms;
-webkit-animation-duration: 11847ms;
animation-duration: 11847ms;
}
.particle:nth-child(33) .graphic {
background: linear-gradient(0deg, #5b763f 0%, #bfdaa3 100%);
-webkit-animation: amplitude 1000ms -35331ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -35331ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(33) .graphic::before {
background: linear-gradient(0deg, rgba(141, 168, 113, 0) 50%, rgba(141, 168, 113, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -35331ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -35331ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(34) .part {
left: calc(50% + 224px);
}
.particle:nth-child(34) .rotate,
.particle:nth-child(34) .rotatefollow {
-webkit-animation-delay: -79193ms;
animation-delay: -79193ms;
-webkit-animation-duration: 14986ms;
animation-duration: 14986ms;
}
.particle:nth-child(34) .graphic {
background: linear-gradient(0deg, #6d5958 0%, #d1bdbc 100%);
-webkit-animation: amplitude 1000ms -79193ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -79193ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(34) .graphic::before {
background: linear-gradient(0deg, rgba(159, 139, 138, 0) 50%, rgba(159, 139, 138, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -79193ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -79193ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(35) .part {
left: calc(50% + 218px);
}
.particle:nth-child(35) .rotate,
.particle:nth-child(35) .rotatefollow {
-webkit-animation-delay: -83120ms;
animation-delay: -83120ms;
-webkit-animation-duration: 11657ms;
animation-duration: 11657ms;
}
.particle:nth-child(35) .graphic {
background: linear-gradient(0deg, #536795 0%, #b7cbf9 100%);
-webkit-animation: amplitude 1000ms -83120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -83120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(35) .graphic::before {
background: linear-gradient(0deg, rgba(133, 153, 199, 0) 50%, rgba(133, 153, 199, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -83120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -83120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(36) .part {
left: calc(50% + 264px);
}
.particle:nth-child(36) .rotate,
.particle:nth-child(36) .rotatefollow {
-webkit-animation-delay: -24650ms;
animation-delay: -24650ms;
-webkit-animation-duration: 6549ms;
animation-duration: 6549ms;
}
.particle:nth-child(36) .graphic {
background: linear-gradient(0deg, #5b8e6b 0%, #bff2cf 100%);
-webkit-animation: amplitude 1000ms -24650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitude 1000ms -24650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(36) .graphic::before {
background: linear-gradient(0deg, rgba(141, 192, 157, 0) 50%, rgba(141, 192, 157, 0.3) 100%);
-webkit-animation: amplitudeShadow 1000ms -24650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: amplitudeShadow 1000ms -24650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(37) .part {
left: calc(50% + 214px);
}
.particle:nth-child(37) .rotate,
.particle:nth-child(37) .rotatefollow {
-webkit-animation-delay: -109400ms;
animation-delay: -109400ms;
-webkit-animation-duration: 5908ms;
animation-duration: .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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