@charset "utf-8"; .particle-network-animation { position: fixed; top: 0; left: 0; right: 0; height: 100vh; background-color: transparent; } .particle-network-animation::before { z-index: -2; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; opacity: 0.2; } .glow-1 { width: 150vw; height: 150vh; margin-top: -75vh; margin-left: -75vw; animation: glow-1-move 25s linear infinite both; } @keyframes glow-1-move { from { transform: translate(-100%, 100%); } to { transform: translate(100%, -100%); } } .glow-2 { width: 100vw; height: 100vh; margin-top: -50vh; margin-left: -50vw; animation: glow-2-move 25s linear 8.3333333333s infinite both; } @keyframes glow-2-move { from { transform: translate(-100%, 0%); } to { transform: translate(100%, 100%); } } .glow-3 { width: 120vw; height: 120vh; margin-top: -60vh; margin-left: -60vw; animation: glow-3-move 25s linear 16.6666666667s infinite both; } @keyframes glow-3-move { from { transform: translate(100%, 100%); } to { transform: translate(0%, -100%); } }