%div.wrap
	-300.times do
		%div.c
View Compiled
$total: 300;
$size: 3px;
$time: 8s;
$hue: 160;

html, body, .wrap {
	height: 100%;
}

body {
	background: black;
	overflow: hidden;
}

.wrap {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform: rotateX(-20deg);
}

.c {
	position: absolute;
	height: $size;
	width: $size;
	left: 50%;
}

@for $i from 1 through $total {
	$deg: $i * 20deg;
	$x: 100px - ($i * (100/$total));
	$y: $i * (100vh/$total);
	$z: ($total - $i) * .5px;
	$hue: $hue + 2;
	.c:nth-child(#{$i}){
		transform: rotateY(0) translate3d(0, random(100) * 1vh, 0);
		animation: anim#{$i} $time infinite linear alternate;
		background: hsla($hue, 100%, 50%, 1);
		animation-delay: $i * .008s;
		opacity: 0;
	}
	@keyframes anim#{$i}{
		20% {
			transform: rotateY($deg) translate3d($x, $y, $z);
			opacity: 1;
		}
		80% {
			transform: rotateY($deg + 720) translate3d($x, $y, $z);
			opacity: 1;
		}
		100% {
			transform: rotateY($deg + 720) translate3d($x * 30, $y, $z);
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.