- 100.times do
	.particle
View Compiled
html, body { height: 100%; }

body {
	background: #262546;
	overflow: hidden;
}

.particle {
	position: absolute;
	animation: shoot 3s ease-out infinite;
	animation-name: shoot, fade;
	border-radius: 50%;
	
	@for $i from 0 to 400 {
		$t: (1 + .01 * random(100)) * 1s;
		
		&:nth-child(#{ $i + 1 }) {
			$d: random(100) + px;
			width: $d; height: $d;
			transform: translate(random(100)*1vw, 
													 random(100)*1vh);
			background: hsl(random(360deg), 80%, 80%);
			animation-duration: $t;
			animation-delay: -.01 * random(100) * $t;
		}
	}
}

@keyframes shoot {
	0% { transform: translate(50vw, 50vh); }
}

@keyframes fade { 
	to { opacity: 0 } 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.