Skip to content

Instantly share code, notes, and snippets.

@lucasad lucasad/dabblet.css
Created Dec 9, 2013

Embed
What would you like to do?
Snow
/**
* 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);
}
}}
<div class="snow">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.