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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.