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: 5908ms; } .particle:nth-child(37) .graphic { background: linear-gradient(0deg, #5e3fc2 0%, #c2a3ff 100%); -webkit-animation: amplitude 1000ms -109400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -109400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(37) .graphic::before { background: linear-gradient(0deg, rgba(144, 113, 244, 0) 50%, rgba(144, 113, 244, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -109400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -109400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(38) .part { left: calc(50% + 226px); } .particle:nth-child(38) .rotate, .particle:nth-child(38) .rotatefollow { -webkit-animation-delay: -71601ms; animation-delay: -71601ms; -webkit-animation-duration: 8863ms; animation-duration: 8863ms; } .particle:nth-child(38) .graphic { background: linear-gradient(0deg, #4642a4 0%, #aaa6ff 100%); -webkit-animation: amplitude 1000ms -71601ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -71601ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(38) .graphic::before { background: linear-gradient(0deg, rgba(120, 116, 214, 0) 50%, rgba(120, 116, 214, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -71601ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -71601ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(39) .part { left: calc(50% + 278px); } .particle:nth-child(39) .rotate, .particle:nth-child(39) .rotatefollow { -webkit-animation-delay: -36501ms; animation-delay: -36501ms; -webkit-animation-duration: 5918ms; animation-duration: 5918ms; } .particle:nth-child(39) .graphic { background: linear-gradient(0deg, #386d8d 0%, #9cd1f1 100%); -webkit-animation: amplitude 1000ms -36501ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -36501ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(39) .graphic::before { background: linear-gradient(0deg, rgba(106, 159, 191, 0) 50%, rgba(106, 159, 191, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -36501ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -36501ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(40) .part { left: calc(50% + 218px); } .particle:nth-child(40) .rotate, .particle:nth-child(40) .rotatefollow { -webkit-animation-delay: -35870ms; animation-delay: -35870ms; -webkit-animation-duration: 14506ms; animation-duration: 14506ms; } .particle:nth-child(40) .graphic { background: linear-gradient(0deg, #867495 0%, #ead8f9 100%); -webkit-animation: amplitude 1000ms -35870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -35870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(40) .graphic::before { background: linear-gradient(0deg, rgba(184, 166, 199, 0) 50%, rgba(184, 166, 199, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -35870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -35870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(41) .part { left: calc(50% + 254px); } .particle:nth-child(41) .rotate, .particle:nth-child(41) .rotatefollow { -webkit-animation-delay: -90893ms; animation-delay: -90893ms; -webkit-animation-duration: 7489ms; animation-duration: 7489ms; } .particle:nth-child(41) .graphic { background: linear-gradient(0deg, #448b95 0%, #a8eff9 100%); -webkit-animation: amplitude 1000ms -90893ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -90893ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(41) .graphic::before { background: linear-gradient(0deg, rgba(118, 189, 199, 0) 50%, rgba(118, 189, 199, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -90893ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -90893ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(42) .part { left: calc(50% + 226px); } .particle:nth-child(42) .rotate, .particle:nth-child(42) .rotatefollow { -webkit-animation-delay: -82794ms; animation-delay: -82794ms; -webkit-animation-duration: 14700ms; animation-duration: 14700ms; } .particle:nth-child(42) .graphic { background: linear-gradient(0deg, #9577b5 0%, #f9dbff 100%); -webkit-animation: amplitude 1000ms -82794ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -82794ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(42) .graphic::before { background: linear-gradient(0deg, rgba(199, 169, 231, 0) 50%, rgba(199, 169, 231, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -82794ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -82794ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(43) .part { left: calc(50% + 272px); } .particle:nth-child(43) .rotate, .particle:nth-child(43) .rotatefollow { -webkit-animation-delay: -56405ms; animation-delay: -56405ms; -webkit-animation-duration: 13834ms; animation-duration: 13834ms; } .particle:nth-child(43) .graphic { background: linear-gradient(0deg, #8f65ad 0%, #f3c9ff 100%); -webkit-animation: amplitude 1000ms -56405ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -56405ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(43) .graphic::before { background: linear-gradient(0deg, rgba(193, 151, 223, 0) 50%, rgba(193, 151, 223, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -56405ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -56405ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(44) .part { left: calc(50% + 227px); } .particle:nth-child(44) .rotate, .particle:nth-child(44) .rotatefollow { -webkit-animation-delay: -74163ms; animation-delay: -74163ms; -webkit-animation-duration: 10148ms; animation-duration: 10148ms; } .particle:nth-child(44) .graphic { background: linear-gradient(0deg, #4e40b8 0%, #b2a4ff 100%); -webkit-animation: amplitude 1000ms -74163ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -74163ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(44) .graphic::before { background: linear-gradient(0deg, rgba(128, 114, 234, 0) 50%, rgba(128, 114, 234, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -74163ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -74163ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(45) .part { left: calc(50% + 269px); } .particle:nth-child(45) .rotate, .particle:nth-child(45) .rotatefollow { -webkit-animation-delay: -108831ms; animation-delay: -108831ms; -webkit-animation-duration: 5727ms; animation-duration: 5727ms; } .particle:nth-child(45) .graphic { background: linear-gradient(0deg, #868664 0%, #eaeac8 100%); -webkit-animation: amplitude 1000ms -108831ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -108831ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(45) .graphic::before { background: linear-gradient(0deg, rgba(184, 184, 150, 0) 50%, rgba(184, 184, 150, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -108831ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -108831ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(46) .part { left: calc(50% + 263px); } .particle:nth-child(46) .rotate, .particle:nth-child(46) .rotatefollow { -webkit-animation-delay: -60708ms; animation-delay: -60708ms; -webkit-animation-duration: 9363ms; animation-duration: 9363ms; } .particle:nth-child(46) .graphic { background: linear-gradient(0deg, #7e7f99 0%, #e2e3fd 100%); -webkit-animation: amplitude 1000ms -60708ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -60708ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(46) .graphic::before { background: linear-gradient(0deg, rgba(176, 177, 203, 0) 50%, rgba(176, 177, 203, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -60708ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -60708ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(47) .part { left: calc(50% + 211px); } .particle:nth-child(47) .rotate, .particle:nth-child(47) .rotatefollow { -webkit-animation-delay: -91255ms; animation-delay: -91255ms; -webkit-animation-duration: 5617ms; animation-duration: 5617ms; } .particle:nth-child(47) .graphic { background: linear-gradient(0deg, #7683be 0%, #dae7ff 100%); -webkit-animation: amplitude 1000ms -91255ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -91255ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(47) .graphic::before { background: linear-gradient(0deg, rgba(168, 181, 240, 0) 50%, rgba(168, 181, 240, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -91255ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -91255ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(48) .part { left: calc(50% + 264px); } .particle:nth-child(48) .rotate, .particle:nth-child(48) .rotatefollow { -webkit-animation-delay: -90712ms; animation-delay: -90712ms; -webkit-animation-duration: 10473ms; animation-duration: 10473ms; } .particle:nth-child(48) .graphic { background: linear-gradient(0deg, #787a86 0%, #dcdeea 100%); -webkit-animation: amplitude 1000ms -90712ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -90712ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(48) .graphic::before { background: linear-gradient(0deg, rgba(170, 172, 184, 0) 50%, rgba(170, 172, 184, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -90712ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -90712ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(49) .part { left: calc(50% + 188px); } .particle:nth-child(49) .rotate, .particle:nth-child(49) .rotatefollow { -webkit-animation-delay: -61606ms; animation-delay: -61606ms; -webkit-animation-duration: 10446ms; animation-duration: 10446ms; } .particle:nth-child(49) .graphic { background: linear-gradient(0deg, #35459e 0%, #99a9ff 100%); -webkit-animation: amplitude 1000ms -61606ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -61606ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(49) .graphic::before { background: linear-gradient(0deg, rgba(103, 119, 208, 0) 50%, rgba(103, 119, 208, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -61606ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -61606ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(50) .part { left: calc(50% + 244px); } .particle:nth-child(50) .rotate, .particle:nth-child(50) .rotatefollow { -webkit-animation-delay: -101062ms; animation-delay: -101062ms; -webkit-animation-duration: 14324ms; animation-duration: 14324ms; } .particle:nth-child(50) .graphic { background: linear-gradient(0deg, #877f7b 0%, #ebe3df 100%); -webkit-animation: amplitude 1000ms -101062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -101062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(50) .graphic::before { background: linear-gradient(0deg, rgba(185, 177, 173, 0) 50%, rgba(185, 177, 173, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -101062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -101062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(51) .part { left: calc(50% + 246px); } .particle:nth-child(51) .rotate, .particle:nth-child(51) .rotatefollow { -webkit-animation-delay: -92460ms; animation-delay: -92460ms; -webkit-animation-duration: 7666ms; animation-duration: 7666ms; } .particle:nth-child(51) .graphic { background: linear-gradient(0deg, #70966c 0%, #d4fad0 100%); -webkit-animation: amplitude 1000ms -92460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -92460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(51) .graphic::before { background: linear-gradient(0deg, rgba(162, 200, 158, 0) 50%, rgba(162, 200, 158, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -92460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -92460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(52) .part { left: calc(50% + 264px); } .particle:nth-child(52) .rotate, .particle:nth-child(52) .rotatefollow { -webkit-animation-delay: -103774ms; animation-delay: -103774ms; -webkit-animation-duration: 12139ms; animation-duration: 12139ms; } .particle:nth-child(52) .graphic { background: linear-gradient(0deg, #408739 0%, #a4eb9d 100%); -webkit-animation: amplitude 1000ms -103774ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -103774ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(52) .graphic::before { background: linear-gradient(0deg, rgba(114, 185, 107, 0) 50%, rgba(114, 185, 107, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -103774ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -103774ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(53) .part { left: calc(50% + 205px); } .particle:nth-child(53) .rotate, .particle:nth-child(53) .rotatefollow { -webkit-animation-delay: -72729ms; animation-delay: -72729ms; -webkit-animation-duration: 6149ms; animation-duration: 6149ms; } .particle:nth-child(53) .graphic { background: linear-gradient(0deg, #837174 0%, #e7d5d8 100%); -webkit-animation: amplitude 1000ms -72729ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -72729ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(53) .graphic::before { background: linear-gradient(0deg, rgba(181, 163, 166, 0) 50%, rgba(181, 163, 166, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -72729ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -72729ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(54) .part { left: calc(50% + 265px); } .particle:nth-child(54) .rotate, .particle:nth-child(54) .rotatefollow { -webkit-animation-delay: -105492ms; animation-delay: -105492ms; -webkit-animation-duration: 11984ms; animation-duration: 11984ms; } .particle:nth-child(54) .graphic { background: linear-gradient(0deg, #5e8967 0%, #c2edcb 100%); -webkit-animation: amplitude 1000ms -105492ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -105492ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(54) .graphic::before { background: linear-gradient(0deg, rgba(144, 187, 153, 0) 50%, rgba(144, 187, 153, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -105492ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -105492ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(55) .part { left: calc(50% + 270px); } .particle:nth-child(55) .rotate, .particle:nth-child(55) .rotatefollow { -webkit-animation-delay: -57505ms; animation-delay: -57505ms; -webkit-animation-duration: 12865ms; animation-duration: 12865ms; } .particle:nth-child(55) .graphic { background: linear-gradient(0deg, #5e3390 0%, #c297f4 100%); -webkit-animation: amplitude 1000ms -57505ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -57505ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(55) .graphic::before { background: linear-gradient(0deg, rgba(144, 101, 194, 0) 50%, rgba(144, 101, 194, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -57505ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -57505ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(56) .part { left: calc(50% + 271px); } .particle:nth-child(56) .rotate, .particle:nth-child(56) .rotatefollow { -webkit-animation-delay: -57788ms; animation-delay: -57788ms; -webkit-animation-duration: 13150ms; animation-duration: 13150ms; } .particle:nth-child(56) .graphic { background: linear-gradient(0deg, #556d7e 0%, #b9d1e2 100%); -webkit-animation: amplitude 1000ms -57788ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -57788ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(56) .graphic::before { background: linear-gradient(0deg, rgba(135, 159, 176, 0) 50%, rgba(135, 159, 176, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -57788ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -57788ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(57) .part { left: calc(50% + 187px); } .particle:nth-child(57) .rotate, .particle:nth-child(57) .rotatefollow { -webkit-animation-delay: -40766ms; animation-delay: -40766ms; -webkit-animation-duration: 7996ms; animation-duration: 7996ms; } .particle:nth-child(57) .graphic { background: linear-gradient(0deg, #4074bb 0%, #a4d8ff 100%); -webkit-animation: amplitude 1000ms -40766ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -40766ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(57) .graphic::before { background: linear-gradient(0deg, rgba(114, 166, 237, 0) 50%, rgba(114, 166, 237, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -40766ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -40766ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(58) .part { left: calc(50% + 193px); } .particle:nth-child(58) .rotate, .particle:nth-child(58) .rotatefollow { -webkit-animation-delay: -104842ms; animation-delay: -104842ms; -webkit-animation-duration: 13881ms; animation-duration: 13881ms; } .particle:nth-child(58) .graphic { background: linear-gradient(0deg, #4a61bf 0%, #aec5ff 100%); -webkit-animation: amplitude 1000ms -104842ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -104842ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(58) .graphic::before { background: linear-gradient(0deg, rgba(124, 147, 241, 0) 50%, rgba(124, 147, 241, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -104842ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -104842ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(59) .part { left: calc(50% + 238px); } .particle:nth-child(59) .rotate, .particle:nth-child(59) .rotatefollow { -webkit-animation-delay: -40730ms; animation-delay: -40730ms; -webkit-animation-duration: 9981ms; animation-duration: 9981ms; } .particle:nth-child(59) .graphic { background: linear-gradient(0deg, #7a3c76 0%, #dea0da 100%); -webkit-animation: amplitude 1000ms -40730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -40730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(59) .graphic::before { background: linear-gradient(0deg, rgba(172, 110, 168, 0) 50%, rgba(172, 110, 168, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -40730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -40730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(60) .part { left: calc(50% + 259px); } .particle:nth-child(60) .rotate, .particle:nth-child(60) .rotatefollow { -webkit-animation-delay: -39762ms; animation-delay: -39762ms; -webkit-animation-duration: 8216ms; animation-duration: 8216ms; } .particle:nth-child(60) .graphic { background: linear-gradient(0deg, #685bb2 0%, #ccbfff 100%); -webkit-animation: amplitude 1000ms -39762ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -39762ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(60) .graphic::before { background: linear-gradient(0deg, rgba(154, 141, 228, 0) 50%, rgba(154, 141, 228, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -39762ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -39762ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(61) .part { left: calc(50% + 237px); } .particle:nth-child(61) .rotate, .particle:nth-child(61) .rotatefollow { -webkit-animation-delay: -78408ms; animation-delay: -78408ms; -webkit-animation-duration: 5616ms; animation-duration: 5616ms; } .particle:nth-child(61) .graphic { background: linear-gradient(0deg, #5b496e 0%, #bfadd2 100%); -webkit-animation: amplitude 1000ms -78408ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -78408ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(61) .graphic::before { background: linear-gradient(0deg, rgba(141, 123, 160, 0) 50%, rgba(141, 123, 160, 0.3) 100%); -webkit-animation: amplitudeShadow 1000ms -78408ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitudeShadow 1000ms -78408ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(62) .part { left: calc(50% + 229px); } .particle:nth-child(62) .rotate, .particle:nth-child(62) .rotatefollow { -webkit-animation-delay: -29669ms; animation-delay: -29669ms; -webkit-animation-duration: 14786ms; animation-duration: 14786ms; } .particle:nth-child(62) .graphic { background: linear-gradient(0deg, #675d8d 0%, #cbc1f1 100%); -webkit-animation: amplitude 1000ms -29669ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: amplitude 1000ms -29669ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .particle:nth-child(62) .graphic::before { background: linear-gradient(0deg, rgba(153, 143, 191, 0) 50%, rgba(153, 143, 191, 0.3) 100%); -webkit-animation.........完整代码请登录后点击上方下载按钮下载查看
网友评论0