CSS Particles

HTML
<div class="purple"></div> <div class="medium-blue"></div> <div class="light-blue"></div> <div class="red"></div> <div class="orange"></div> <div class="yellow"></div> <div class="cyan"></div> <div class="light-green"></div> <div class="lime"></div> <div class="magenta"></div> <div class="lightish-red"></div> <div class="pink"></div>
SCSS
body { background: -webkit-radial-gradient(circle, #24246e, #06051f); background: radial-gradient(circle, #24246e, #06051f); overflow: hidden; position: relative; width: 100vw; height: 100vh; } body:active div, body:active div::before, body:active div::after { padding: 40px; } div, div::before, div::after { content: ''; position: fixed; top: 0; left: 0; opacity: 0.9; -webkit-transform-origin: top; transform-origin: top; -webkit-transition: all 5s linear 0s; transition: all 5s linear 0s; } .purple { -webkit-animation: purple linear 30s alternate infinite; animation: purple linear 30s alternate infinite; border: 2px solid #241379; border-radius: 100%; width: 15px; height: 15px; -webkit-transform: translate3d(40vw, 48vh, 0); transform: translate3d(40vw, 48vh, 0); z-index: 7; } .purple::before { -webkit-animation: purple-pseudo linear 15s alternate infinite; animation: purple-pseudo linear 15s alternate infinite; background: #241379; border: 2px solid #241379; width: 49px; height: 42px; -webkit-transform: translate3d(46vw, 7vh, 0) rotate(56deg); transform: translate3d(46vw, 7vh, 0) rotate(56deg); } .purple::after { -webkit-animation: purple-pseudo linear 20s alternate infinite; animation: purple-pseudo linear 20s alternate infinite; border: 2px solid #241379; width: 45px; height: 12px; -webkit-transform: translate3d(-35vw, -48vh, 0) rotate(81deg); transform: translate3d(-35vw, -48vh, 0) rotate(81deg); } @-webkit-keyframes purple { 50% { -webkit-transform: translate3d(26vw, 72vh, 0); transform: translate3d(26vw, 72vh, 0); } 100% { -webkit-transform: translate3d(13vw, 70vh, 0); transform: translate3d(13vw, 70vh, 0); } } @keyframes purple { 50% { -webkit-transform: translate3d(26vw, 72vh, 0); transform: translate3d(26vw, 72vh, 0); } 100% { -webkit-transform: translate3d(13vw, 70vh, 0); transform: translate3d(13vw, 70vh, 0); } } @-webkit-keyframes purple-pseudo { 33% { -webkit-transform: translate3d(16vw, -47vh, 0) rotate(287deg); transform: translate3d(16vw, -47vh, 0) rotate(287deg); } 100% { -webkit-transform: translate3d(45vw, -3vh, 0) rotate(199deg); transform: translate3d(45vw, -3vh, 0) rotate(199deg); } } @keyframes purple-pseudo { 33% { -webkit-transform: translate3d(16vw, -47vh, 0) rotate(287deg); transform: translate3d(16vw, -47vh, 0) rotate(287deg); } 100% { -webkit-transform: translate3d(45vw, -3vh, 0) rotate(199deg); transform: translate3d(45vw, -3vh, 0) rotate(199deg); } } .medium-blue { -webkit-animation: medium-blue linear 30s alternate infinite; animation: medium-blue linear 30s alternate infinite; border: 2px solid #2185bf; border-radius: 100%; width: 14px; height: 14px; -webkit-transform: translate3d(70vw, 23vh, 0); transform: translate3d(70vw, 23vh, 0); z-index: 11; } .medium-blue::before { -webkit-animation: medium-blue-pseudo linear 15s alternate infinite; animation: medium-blue-pseudo linear 15s alternate infinite; background: #2185bf; border: 2px solid #2185bf; width: 24px; height: 19px; -webkit-transform: translate3d(-7vw, 48vh, 0) rotate(188deg); transform: translate3d(-7vw, 48vh, 0) rotate(188deg); } .medium-blue::after { -webkit-animation: medium-blue-pseudo linear 20s alternate infinite; animation: medium-blue-pseudo linear 20s alternate infinite; border: 2px solid #2185bf; width: 28px; height: 28px; -webkit-transform: translate3d(-47vw, 32vh, 0) rotate(324deg); transform: translate3d(-47vw, 32vh, 0) rotate(324deg); } @-webkit-keyframes medium-blue { 50% { -webkit-transform: translate3d(90vw, 15vh, 0); transform: translate3d(90vw, 15vh, 0); } 100% { -webkit-transform: translate3d(29vw, 98vh, 0); transform: translate3d(29vw, 98vh, 0); } } @keyframes medium-blue { 50% { -webkit-transform: translate3d(90vw, 15vh, 0); transform: translate3d(90vw, 15vh, 0); } 100% { -webkit-transform: translate3d(29vw, 98vh, 0); transform: translate3d(29vw, 98vh, 0); } } @-webkit-keyframes medium-blue-pseudo { 33% { -webkit-transform: translate3d(-41vw, 26vh, 0) rotate(356deg); transform: translate3d(-41vw, 26vh, 0) rotate(356deg); } 100% { -webkit-transform: translate3d(-7vw, -48vh, 0) rotate(76deg); transform: translate3d(-7vw, -48vh, 0) rotate(76deg); } } @keyframes medium-blue-pseudo { 33% { -webkit-transform: translate3d(-41vw, 26vh, 0) rotate(356deg); transform: translate3d(-41vw, 26vh, 0) rotate(356deg); } 100% { -webkit-transform: translate3d(-7vw, -48vh, 0) rotate(76deg); transform: translate3d(-7vw, -48vh, 0) rotate(76deg); } } .light-blue { -webkit-animation: light-blue linear 30s alternate infinite; animation: light-blue linear 30s alternate infinite; border: 2px solid #1fbce1; border-radius: 100%; width: 18px; height: 18px; -webkit-transform: translate3d(2vw, 50vh, 0); transform: translate3d(2vw, 50vh, 0); z-index: 5; } .light-blue::before { -webkit-animation: light-blue-pseudo linear 15s alternate infinite; animation: light-blue-pseudo linear 15s alternate infinite; background: #1fbce1; border: 2px solid #1fbce1; width: 42px; height: 24px; -webkit-transform: translate3d(92vw, 13vh, 0) rotate(350deg); transform: translate3d(92vw, 13vh, 0) rotate(350deg); } .light-blue::after { -webkit-animation: light-blue-pseudo linear 20s alternate infinite; animation: light-blue-pseudo linear 20s alternate infinite; border: 2px solid #1fbce1; width: 26px; height: 18px; -webkit-transform: translate3d(81vw, -31vh, 0) rotate(112deg); transform: translate3d(81vw, -31vh, 0) rotate(112deg); } @-webkit-keyframes light-blue { 50% { -webkit-transform: translate3d(93vw, 75vh, 0); transform: translate3d(93vw, 75vh, 0); } 100% { -webkit-transform: translate3d(36vw, 85vh, 0); transform: translate3d(36vw, 85vh, 0); } } @keyframes light-blue { 50% { -webkit-transform: translate3d(93vw, 75vh, 0); transform: translate3d(93vw, 75vh, 0); } 100% { -webkit-transform: translate3d(36vw, 85vh, 0); transform: translate3d(36vw, 85vh, 0); } } @-webkit-keyframes light-blue-pseudo { 33% { -webkit-transform: translate3d(-52vw, -73vh, 0) rotate(59deg); transform: translate3d(-52vw, -73vh, 0) rotate(59deg); } 100% { -webkit-transform: translate3d(53vw, -15vh, 0) rotate(312deg); transform: translate3d(53vw, -15vh, 0) rotate(312deg); } } @keyframes light-blue-pseudo { 33% { -webkit-transform: translate3d(-52vw, -73vh, 0) rotate(59deg); transform: translate3d(-52vw, -73vh, 0) rotate(59deg); } 100% { -webkit-transform: translate3d(53vw, -15vh, 0) rotate(312deg); transform: translate3d(53vw, -15vh, 0) rotate(312deg); } } .red { -webkit-animation: red linear 30s alternate infinite; animation: red linear 30s alternate infinite; border: 2px solid #b62f56; border-radius: 100%; width: 38px; height: 38px; -webkit-transform: translate3d(56vw, 73vh, 0); transform: translate3d(56vw, 73vh, 0); z-index: 4; } .red::before { -webkit-animation: red-pseudo linear 15s alternate infinite; animation: red-pseudo linear 15s alternate infinite; background: #b62f56; border: 2px solid #b62f56; width: 5px; height: 6px; -webkit-transform: translate3d(-26vw, -25vh, 0) rotate(239deg); transform: translate3d(-26vw, -25vh, 0) rotate(239deg); } .red::after { -webkit-animation: red-pseudo linear 20s alternate infinite; animation: red-pseudo linear 20s alternate infinite; border: 2px solid #b62f56; width: 31px; height: 12px; -webkit-transform: translate3d(-24vw, -17vh, 0) rotate(330deg); transform: translate3d(-24vw, -17vh, 0) rotate(330deg); } @-webkit-keyframes red { 50% { -webkit-transform: translate3d(2vw, 32vh, 0); transform: translate3d(2vw, 32vh, 0); } 100% { -webkit-transform: translate3d(91vw, 93vh, 0); transform: translate3d(91vw, 93vh, 0); } } @keyframes red { 50% { -webkit-transform: translate3d(2vw, 32vh, 0); transform: translate3d(2vw, 32vh, 0); } 100% { -webkit-transform: translate3d(91vw, 93vh, 0); transform: translate3d(91vw, 93vh, 0); } } @-webkit-keyframes red-pseudo { 33% { -webkit-transform: translate3d(58vw, 65vh, 0) rotate(33deg); transform: translate3d(58vw, 65vh, 0) rotate(33deg); } 100% { -webkit-transform: translate3d(-38vw, 1vh, 0) rotate(318deg); transform: translate3d(-38vw, 1vh, 0) rotate(318deg); } } @keyframes red-pseudo { 33% { -webkit-transform: translate3d(58vw, 65vh, 0) rotate(33deg); transform: translate3d(58vw, 65vh, 0) rotate(33deg); } 100% { -webkit-transform: translate3d(-38vw, 1vh, 0) rotate(318deg); transform: translate3d(-38vw, 1vh, 0) rotate(318deg); } } .orange { -webkit-animation: orange linear 30s alternate infinite; animation: orange linear 30s alternate infinite; border: 2px solid #d5764c; border-radius: 100%; width: 23px; height: 23px; -webkit-transform: translate3d(21vw, 27vh, 0); transform: translate3d(21vw, 27vh, 0); z-index: 3; } .orange::before { -webkit-animation: orange-pseudo linear 15s alternate infinite; animation: orange-pseudo linear 15s alternate infinite; background: #d5764c; border: 2px solid #d5764c; width: 9px; height: 27px; -webkit-transform: translate3d(46vw, -13vh, 0) rotate(347deg); transform: translate3d(46vw, -13vh, 0) rotate(347deg); } .orange::after { -webkit-animation: orange-pseudo linear 20s alternate infinite; animation: orange-pseudo linear 20s alternate infinite; border: 2px solid #d5764c; width: 18px; height: 10px; -webkit-transform: translate3d(-10vw, 24vh, 0) rotate(342deg); transform: translate3d(-10vw, 24vh, 0) rotate(342deg); } @-webkit-keyframes orange { 50% { -webkit-transform: translate3d(22vw, 15vh, 0); transform: translate3d(22vw, 15vh, 0); } 100% { -webkit-transform: translate3d(51vw, 8vh, 0); transform: translate3d(51vw, 8vh, 0); } } @keyframes orange { 50% { -webkit-transform: translate3d(22vw, 15vh, 0); transform: translate3d(22vw, 15vh, 0); } 100% { -webkit-transform: translate3d(51vw, 8vh, 0); transform: translate3d(51vw, 8vh, 0); } } @-webkit-keyframes orange-pseudo { 33% { -webkit-transform: translate3d(18vw, 24vh, 0) rotate(41deg); transform: translate3d(18vw, 24vh, 0) rotate(41deg); } 100% { -webkit-transform: translate3d(37vw, 89vh, 0) rotate(282deg); transform: translate3d(37vw, 89vh, 0) rotate(282deg); } } @keyframes orange-pseudo { 33% { -webkit-transform: translate3d(18vw, 24vh, 0) rotate(41deg); transform: translate3d(18vw, 24vh, 0) rotate(41deg); } 100% { -webkit-transform: translate3d(37vw, 89vh, 0) rotate(282deg); transform: translate3d(37vw, 89vh, 0) rotate(282deg); } } .yellow { -webkit-animation: yellow linear 30s alternate infinite; animation: yellow linear 30s alternate infinite; border: 2px solid #ffd53e; border-radius: 100%; width: 37px; height: 37px; -webkit-transform: translate3d(4vw, 72vh, 0); transform: translate3d(4vw, 72vh, 0); z-index: 1; } .yellow::before { -webkit-animation: yellow-pseudo linear 15s alternate infinite; animation: yellow-pseudo linear 15s alternate infinite; background: #ffd53e; border: 2px solid #ffd53e; width: 35px; height: 30px; -webkit-transform: translate3d(79vw, 6vh, 0) rotate(64deg); transform: translate3d(79vw, 6vh, 0) rotate(64deg); } .yellow::after { -webkit-animation: yellow-pseudo linear 20s alternate infinite; animation: yellow-pseudo linear 20s alternate infinite; border: 2px solid #ffd53e; width: 16px; height: 42px; -webkit-transform: translate3d(61vw, -47vh, 0) rotate(98deg); transform: translate3d(61vw, -47vh, 0) rotate(98deg); } @-webkit-keyframes yellow { 50% { -webkit-transform: translate3d(75vw, 37vh, 0); transform: translate3d(75vw, 37vh, 0); } 100% { -webkit-transform: translate3d(87vw, 24vh, 0); transform: translate3d(87vw, 24vh, 0); } } @keyframes yellow { 50% { -webkit-transform: translate3d(75vw, 37vh, 0); transform: translate3d(75vw, 37vh, 0); } 100% { -webkit-transform: translate3d(87vw, 24vh, 0); transform: translate3d(87vw, 24vh, 0); } } @-webkit-keyframes yellow-pseudo { 33% { -webkit-transform: translate3d(-57vw, -11vh, 0) rotate(277deg); transform: translate3d(-57vw, -11vh, 0) rotate(277deg); } 100% { -webkit-transform: translate3d(-7vw, 33vh, 0) rotate(94deg); transform: translate3d(-7vw, 33vh, 0) rotate(94deg); } } @keyframes yellow-pseudo { 33% { -webkit-transform: translate3d(-57vw, -11vh, 0) rotate(277deg); transform: translate3d(-57vw, -11vh, 0) rotate(277deg); } 100% { -webkit-transform: translate3d(-7vw, 33vh, 0) rotate(94deg); transform: translate3d(-7vw, 33vh, 0) rotate(94deg); } } .cyan { -webkit-animation: cyan linear 30s alternate infinite; animation: cyan linear 30s alternate infinite; border: 2px solid #78ffba; border-radius: 100%; width: 25px; height: 25px; -webkit-transform: translate3d(15vw, 38vh, 0); transform: translate3d(15vw, 38vh, 0); z-index: 9; } .cyan::before { -webkit-animation: cyan-pseudo linear 15s alternate infinite; animation: cyan-pseudo linear 15s alternate infinite; background: #78ffba; border: 2px solid #78ffba; width: 14px; height: 9px; -webkit-transform: translate3d(44vw, 27vh, 0) rotate(214deg); transform: translate3d(44vw, 27vh, 0) rotate(214deg); } .cyan::after { -webkit-animation: cyan-pseudo linear 20s alternate infinite; animation: cyan-pseudo linear 20s alternate infinite; border: 2px solid #78ffba; width: 9px; height: 8px; -webkit-transform: translate3d(21vw, 52vh, 0) rotate(57deg); transform: translate3d(21vw, 52vh, 0) rotate(57deg); } @-webkit-keyframes cyan { 50% { -webkit-transform: translate3d(22vw, 95vh, 0); transform: translate3d(22vw, 95vh, 0); } 100% { -webkit-transform: translate3d(21vw, 6vh, 0); transform: translate3d(21vw, 6vh, 0); } } @keyframes cyan { 50% { -webkit-transform: translate3d(22vw, 95vh, 0); transform: translate3d(22vw, 95vh, 0); } 100% { -webkit-transform: translate3d(21vw, 6vh, 0); transform: translate3d(21vw, 6vh, 0); } } @-webkit-keyframes cyan-pseudo { 33% { -webkit-transform: translate3d(6vw, -49vh, 0) rotate(298deg); transform: translate3d(6vw, -49vh, 0) rotate(298deg); } 100% { -webkit-transform: translate3d(41vw, 31vh, 0) rotate(67deg); transform: translate3d(41vw, 31vh, 0) rotate(67deg); } } @keyframes cyan-pseudo { 33% { -webkit-transform: translate3d(6vw, -49vh, 0) rotate(298deg); transform: translate3d(6vw, -49vh, 0) rotate(298deg); } 100% { -webkit-transform: translate3d(41vw, 31vh, 0) rotate(67deg); transform: translate3d(41vw, 31vh, 0) rotate(67deg); } } .light-green { -webkit-animation: light-green linear 30s alternate infinite; animation: light-green linear 30s alternate infinite; border: 2px solid #98fd85; border-radius: 100%; width: 14px; height: 14px; -webkit-transform: translate3d(28vw, 18vh, 0); transform: translate3d(28vw, 18vh, 0); z-index: 6; } .light-green::before { -webkit-animation: light-green-pseudo linear 15s alternate infinite; animation: light-green-pseudo linear 15s alternate infinite; background: #98fd85; border: 2px solid #98fd85; width: 49px; height: 41px; -webkit-transform: translate3d(0vw, 14vh, 0) rotate(280deg); transform: translate3d(0vw, 14vh, 0) rotate(280deg); } .light-green::after { -webkit-animation: light-green-pseudo linear 20s alternate infinite; animation: light-green-pseudo linear 20s alternate infinite; border: 2px solid #98fd85; width: 20px; height: 34px; -webkit-transform: translate3d(-13vw, -17vh, 0) rotate(110deg); transform: translate3d(-13vw, -17vh, 0) rotate(110deg); } @-webkit-keyframes light-green { 50% { -webkit-transform: translate3d(6vw, 43vh, 0); transform: translate3d(6vw, 43vh, 0); } 100% { -webkit-transform: translate3d(61vw, 99vh, 0); transform: translate3d(61vw, 99vh, 0); } } @keyframes light-green { 50% { -webkit-transform: translate3d(6vw, 43vh, 0); transform: translate3d(6vw, 43vh, 0); } 100% { -webkit-transform: translate3d(61vw, 99vh, 0); transform: translate3d(61vw, 99vh, 0); } } @-webkit-keyframes light-green-pseudo { 33% { -webkit-transform: translate3d(-3vw, 42vh, 0) rotate(53deg); transform: translate3d(-3vw, 42vh, 0) rotate(53deg); } 100% { -webkit-transform: translate3d(-56vw, -50vh, 0) rotate(46deg); transform: translate3d(-56vw, -50vh, 0) rotate(46deg); } } @keyframes light-green-pseudo { 33% { -webkit-transform: translate3d(-3vw, 42vh, 0) rotate(53deg); transform: translate3d(-3vw, 42vh, 0) rotate(53deg); } 100% { -webkit-transform: translate3d(-56vw, -50vh, 0) rotate(46deg); transform: translate3d(-56vw, -50vh, 0) rotate(46deg); } } .lime { -webkit-animation: lime linear 30s alternate infinite; animation: lime linear 30s alternate infinite; border: 2px solid #befb46; border-radius: 100%; width: 41px; height: 41px; -webkit-transform: translate3d(36vw, 22vh, 0); transform: translate3d(36vw, 22vh, 0); z-index: 8; } .lime::before { -webkit-animation: lime-pseudo linear 15s alternate infinite; animation: lime-pseudo linear 15s alternate infinite; background: #befb46; border: 2px solid #befb46; width: 46px; height: 5px; -webkit-transform: translate3d(-17vw, 60vh, 0) rotate(325deg); transform: translate3d(-17vw, 60vh, 0) rotate(325deg); } .lime::after { -webkit-animation: lime-pseudo linear 20s alternate infinite; animation: lime-pseudo linear 20s alternate infinite; border: 2px solid #befb46; width: 48px; height: 49px; -webkit-transform: translate3d(-34vw, 2vh, 0) rotate(32deg); transform: translate3d(-34vw, 2vh, 0) rotate(32deg); } @-webkit-keyframes lime { 50% { -webkit-transform: translate3d(86vw, 61vh, 0); transform: translate3d(86vw, 61vh, 0); } 100% { -webkit-transform: translate3d(84vw, 55vh, 0); transform: translate3d(84vw, 55vh, 0); } } @keyframes lime { 50% { -webkit-transform: translate3d(86vw, 61vh, 0); transform: translate3d(86vw, 61vh, 0); } 100% { -webkit-transform: translate3d(84vw, 55vh, 0); transform: translate3d(84vw, 55vh, 0); } } @-webkit-keyframes lime-pseudo { 33% { -webkit-transform: translate3d(-30vw, 0vh, 0) rotate(150deg); transform: translate3d(-30vw, 0vh, 0) rotate(150deg); } 100% { -webkit-transform: translate3d(-51vw, 41vh, 0) rotate(175deg); transform: translate3d(-51vw, 41vh, 0) rotate(175deg); } } @keyframes lime-pseudo { 33% { -webkit-transform: translate3d(-30vw, 0vh, 0) rotate(150deg); transform: translate3d(-30vw, 0vh, 0) rotate(150deg); } 100% { -webkit-transform: translate3d(-51vw, 41vh, 0) rotate(175deg); transform: translate3d(-51vw, 41vh, 0) rotate(175deg); } } .magenta { -webkit-animation: magenta linear 30s alternate infinite; animation: magenta linear 30s alternate infinite; border: 2px solid #6c046c; border-radius: 100%; width: 31px; height: 31px; -webkit-transform: translate3d(1vw, 25vh, 0); transform: translate3d(1vw, 25vh, 0); z-index: 3; } .magenta::before { -webkit-animation: magenta-pseudo linear 15s alternate infinite; animation: magenta-pseudo linear 15s alternate infinite; background: #6c046c; border: 2px solid #6c046c; width: 7px; height: 39px; -webkit-transform: translate3d(1vw, 52vh, 0) rotate(129deg); transform: translate3d(1vw, 52vh, 0) rotate(129deg); } .magenta::after { -webkit-animation: magenta-pseudo linear 20s alternate infinite; animation: magenta-pseudo linear 20s alternate infinite; border: 2px solid #6c046c; width: 28px; height: 45px; -webkit-transform: translate3d(1vw, 29vh, 0) rotate(176deg); transform: translate3d(1vw, 29vh, 0) rotate(176deg); } @-webkit-keyframes magenta { 50% { -webkit-transform: translate3d(28vw, 60vh, 0); transform: translate3d(28vw, 60vh, 0); } 100% { -webkit-transform: translate3d(18vw, 11vh, 0); transform: translate3d(18vw, 11vh, 0); } } @keyframes magenta { 50% { -webkit-transform: translate3d(28vw, 60vh, 0); transform: translate3d(28vw, 60vh, 0); } 100% { -webkit-transform: translate3d(18vw, 11vh, 0); transform: translate3d(18vw, 11vh, 0); } } @-webkit-keyframes magenta-pseudo { 33% { -webkit-transform: translate3d(-14vw, 38vh, 0) rotate(330deg); transform: translate3d(-14vw, 38vh, 0) rotate(330deg); } 100% { -webkit-transform: translate3d(19vw, 40vh, 0) rotate(288deg); transform: translate3d(19vw, 40vh, 0) rotate(288deg); } } @keyframes magenta-pseudo { 33% { -webkit-transform: translate3d(-14vw, 38vh, 0) rotate(330deg); transform: translate3d(-14vw, 38vh, 0) rotate(330deg); } 100% { -webkit-transform: translate3d(19vw, 40vh, 0) rotate(288deg); transform: translate3d(19vw, 40vh, 0) rotate(288deg); } } .lightish-red { -webkit-animation: lightish-red linear 30s alternate infinite; animation: lightish-red linear 30s alternate infinite; border: 2px solid #f04c81; border-radius: 100%; width: 16px; height: 16px; -webkit-transform: translate3d(87vw, 97vh, 0); transform: translate3d(87vw, 97vh, 0); z-index: 1; } .lightish-red::before { -webkit-animation: lightish-red-pseudo linear 15s alternate infinite; animation: lightish-red-pseudo linear 15s alternate infinite; background: #f04c81; border: 2px solid #f04c81; width: 11px; height: 49px; -webkit-transform: translate3d(-52vw, -94vh, 0) rotate(133deg); transform: translate3d(-52vw, -94vh, 0) rotate(133deg); } .lightish-red::after { -webkit-animation: lightish-red-pseudo linear 20s alternate infinite; animation: lightish-red-pseudo linear 20s alternate infinite; border: 2px solid #f04c81; width: 48px; height: 34px; -webkit-transform: translate3d(-85vw, -18vh, 0) rotate(193deg); transform: translate3d(-85vw, -18vh, 0) rotate(193deg); } @-webkit-keyframes lightish-red { 50% { -webkit-transform: translate3d(65vw, 64vh, 0); transform: translate3d(65vw, 64vh, 0); } 100% { -webkit-transform: translate3d(36vw, 17vh, 0); transform: translate3d(36vw, 17vh, 0); } } @keyframes lightish-red { 50% { -webkit-transform: translate3d(65vw, 64vh, 0); transform: translate3d(65vw, 64vh, 0); } 100% { -webkit-transform: translate3d(36vw, 17vh, 0); transform: translate3d(36vw, 17vh, 0); } } @-webkit-keyframes lightish-red-pseudo { 33% { -webkit-transform: translate3d(33vw, 30vh, 0) rotate(212deg); transform: translate3d(33vw, 30vh, 0) rotate(212deg); } 100% { -webkit-transform: translate3d(48vw, -6vh, 0) rotate(304deg); transform: translate3d(48vw, -6vh, 0) rotate(304deg); } } @keyframes lightish-red-pseudo { 33% { -webkit-transform: translate3d(33vw, 30vh, 0) rotate(212deg); transform: translate3d(33vw, 30vh, 0) rotate(212deg); } 100% { -webkit-transform: translate3d(48vw, -6vh, 0) rotate(304deg); transform: translate3d(48vw, -6vh, 0) rotate(304deg); } } .pink { -webkit-animation: pink linear 30s alternate infinite; animation: pink linear 30s alternate infinite; border: 2px solid #ff4293; border-radius: 100%; width: 26px; height: 26px; -webkit-transform: translate3d(96vw, 96vh, 0); transform: translate3d(96vw, 96vh, 0); z-index: 12; } .pink::before { -webkit-animation: pink-pseudo linear 15s alternate infinite; animation: pink-pseudo linear 15s alternate infinite; background: #ff4293; border: 2px solid #ff4293; width: 29px; height: 20px; -webkit-transform: translate3d(-9vw, -32vh, 0) rotate(128deg); transform: translate3d(-9vw, -32vh, 0) rotate(128deg); } .pink::after { -webkit-animation: pink-pseudo linear 20s alternate infinite; animation: pink-pseudo linear 20s alternate infinite; border: 2px solid #ff4293; width: 34px; height: 25px; -webkit-transform: translate3d(-79vw, -33vh, 0) rotate(220deg); transform: translate3d(-79vw, -33vh, 0) rotate(220deg); } @-webkit-keyframes pink { 50% { -webkit-transform: translate3d(16vw, 18vh, 0); transform: translate3d(16vw, 18vh, 0); } 100% { -webkit-transform: translate3d(53vw, 78vh, 0); transform: translate3d(53vw, 78vh, 0); } } @keyframes pink { 50% { -webkit-transform: translate3d(16vw, 18vh, 0); transform: translate3d(16vw, 18vh, 0); } 100% { -webkit-transform: translate3d(53vw, 78vh, 0); transform: translate3d(53vw, 78vh, 0); } } @-webkit-keyframes pink-pseudo { 33% { -webkit-transform: translate3d(19vw, 77vh, 0) rotate(22deg); transform: translate3d(19vw, 77vh, 0) rotate(22deg); } 100% { -webkit-transform: translate3d(10vw, -26vh, 0) rotate(334deg); transform: translate3d(10vw, -26vh, 0) rotate(334deg); } } @keyframes pink-pseudo { 33% { -webkit-transform: translate3d(19vw, 77vh, 0) rotate(22deg); transform: translate3d(19vw, 77vh, 0) rotate(22deg); } 100% { -webkit-transform: translate3d(10vw, -26vh, 0) rotate(334deg); transform: translate3d(10vw, -26vh, 0) rotate(334deg); } }
JAVASCRIPT
Expand for more options Login