Snow

dabblet.css

/**
 * Snow
 */

body { 
	overflow-x: hidden;
	background:black;
}

.snow {
/*	top: -15px; */
	position: absolute;
	width: 100%;
	height: 1vh;
}

/* default animation and transform */
.snow > i {
	position: absolute;
	display: block;
	color: white;
	opacity: 0.5;
	z-index: -1;
	border-radius: 50%;
	animation: falling 7.7s linear 2s infinite;
}
.snow::after {
	content: '☆'
}

.snow > i:nth-child(1) {
	transform-origin: 300px; 
}
.snow > i:nth-child(2) {
	transform-origin: 20% 0; 
}
.snow > i:nth-child(3) {
	transform-origin: 30% 0; 
}
.snow > i:nth-child(4) {
	transform-origin: 40% 0; 
}
@keyframes falling {
	0% { 
		-webkit-transform: translate3d(0,0,0) rotate(0deg);
	}
	100% { 
		-webkit-transform: translate3d(0,1vh,0) rotate(360deg);
	}	
}}

dabblet.html

<div class="snow">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}