div.frame
	div.center
		div.bg
			ul.stars
				- for (var i = 1; i < 250; i++)
					div(class=`star star--${i}`)
			ul.shooting-stars
				- for (var i = 1; i < 4; i++)
					div(class=`shooting-star shooting-star--${i}`)
View Compiled
// 100 Days #42 - Space

// Boilerplate styles
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

// Custom styles

$number-of-stars: 250;
$number-of-shooting-stars: 10;
$shooting-star-size: 4px;

.center {
	display: flex;
	height: 100%;
	width: 100%;
}

.bg {
	border: 10px solid white;
	width: 100%;
	background: rgb(47,75,112);
	background: linear-gradient(0deg, rgba(47,75,112,1) 0%, rgba(24,12,56,1) 100%);
}

.star {
	position: absolute;
	background-color: white;
	border-radius: 50%;
}

.shooting-star {
	animation: random(3) * 1s star-streak ease-out infinite;
	animation-delay: random() * 1s;	
	position: absolute;
	width: $shooting-star-size;
	height: $shooting-star-size;
	border-radius: 50%;
	background-color: white;
	
	.pause & {
		animation: none;
	}
	
	&:before {
		content: '';
		transform: translateX($shooting-star-size / 2);
		position: absolute;
		top: 0;
		left: 0;
		clip-path: polygon(0 0, 0 100%, 100% 100%);
		width: 150px;
		height: $shooting-star-size;
		background: white;
		background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0.3) 35%, rgba(24, 12, 56, 0.05) 100%);
	}
}

@for $i from 1 through $number-of-stars {
		$size: ceil(random() * 4px);
    .star--#{$i} {
        top: random() * 100%;
				left: random() * 100%;
				opacity: random();
				width: $size;
				height: $size;
				@if ($i % 3 == 0) {
						animation: random(3) * 1s twinkle linear alternate infinite;
						animation-delay: random() * 1s;
				}
				.pause & {
					animation: none;
				}
    }
}

@for $i from 1 through $number-of-shooting-stars {
		$size: ceil(random() * 4px);
		$offset: ceil(random(10) * 10px);
    .shooting-star--#{$i} {
				opacity: random();
				transform: rotate(-162deg) translateY($offset);
				width: $size;
				height: $size;
				animation: random(3) * 2s star-streak linear infinite;
				animation-delay: random() * 2s;
				.pause & {
					animation: none;
				}
    }
}

@keyframes twinkle {
	0% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes star-streak {
	0% {
		top: 0%;
		left: -100%;
	}
	40%, 
	100% {
		top: 100%;
		left: 200%;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.