css
@-webkit-keyframes stars {
50% {
opacity: 1;
}
100% {
transform: translate3d(0vmin, 0vmin, 1000vmin) scale(5);
opacity: 0;
}
}
html, body {
width: 100%;
height: 100%;
}
body {
perspective: 200vmin;
perspective-origin: 50% 50%;
background: #000;
overflow: hidden;
}
body span {
width: .5vmin;
height: .5vmin;
position: absolute;
top: 50vh;
left: 50vw;
transform: translate3d(0vmin, 0vmin, -5000vmin) scale(5);
opacity: 0;
}
body span:nth-of-type(1) {
box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
animation: stars 10s infinite linear;
}
body span:nth-of-type(2) {
animation: stars 9s infinite linear 1s;
box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
}
body span:nth-of-type(3) {
animation: stars 8s infinite linear 2s;
box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
}
body span:nth-of-type(4) {
animation: stars 7s infinite linear 3s;
box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
}
body span:nth-of-type(5) {
animation: stars 6s infinite linear 4s;
box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
}
body span:nth-of-type(6) {
animation: stars 5s infinite linear 5s;
box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
}
body span:nth-of-type(7) {
animation: stars 4s infinite linear 6s;
box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
}
body span:nth-of-type(8) {
animation: stars 3s infinite linear 7s;
box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
}
body span:nth-of-type(9) {
animation: stars 2s infinite linear 8s;
box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
}
body span:nth-of-type(10) {
animation: stars 1s infinite linear 9s;
box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
}