css particle background

1<!-- Inspired by: https://codepen.io/natewiley/pen/Ciwyn -->
2
3<div id="particle-container">
4	<div class="particle"></div>
5	<div class="particle"></div>
6	<div class="particle"></div>
7	<div class="particle"></div>
8	<div class="particle"></div>
9	<div class="particle"></div>
10	<div class="particle"></div>
11	<div class="particle"></div>
12	<div class="particle"></div>
13	<div class="particle"></div>
14	<div class="particle"></div>
15	<div class="particle"></div>
16	<div class="particle"></div>
17	<div class="particle"></div>
18	<div class="particle"></div>
19	<div class="particle"></div>
20	<div class="particle"></div>
21	<div class="particle"></div>
22	<div class="particle"></div>
23	<div class="particle"></div>
24	<div class="particle"></div>
25	<div class="particle"></div>
26	<div class="particle"></div>
27	<div class="particle"></div>
28	<div class="particle"></div>
29	<div class="particle"></div>
30	<div class="particle"></div>
31	<div class="particle"></div>
32	<div class="particle"></div>
33	<div class="particle"></div>
34</div>
35
36<style>
37  body {
38    background: #ecf3f3;
39}
40
41.particle {
42	position: absolute;
43 	border-radius: 50%;
44}
45
46@for $i from 1 through 30 {
47	@keyframes particle-animation-#{$i} {
48		100% {
49			transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
50		}
51	}
52	
53	.particle:nth-child(#{$i}){
54		animation: particle-animation-#{$i} 60s infinite;
55		$size: random(5) + 5 + px;
56		opacity: random(100)/100;
57		height: $size;
58		width: $size;
59		animation-delay: -$i * .2s;
60		transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
61		background: hsl(random(360), 70%, 50%);
62	}
63}
64  </style>