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