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