CSS
CSS3

CSSで雪を降らせる。

More than 3 years have passed since last update.

sample.gif

実際の動作を確認したい人向け

https://jsfiddle.net/junya_5102/t4f8v0e8/1/


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


body{
background-color: black;
}

.snow{
position: fixed;
top: -5%;

/* 雪の大きさ */
font-size: 20px;

/* 雪の色 */
color: snow;

/* 雪 */
text-shadow:
5vw -200px 0,
10vw -400px 0,
20vw -500px 0,
30vw -580px 0,
39vw -250px 0,
42vw -340px 0,
56vw -150px 0,
63vw -180px 0,
78vw -220px 0,
86vw -320px 0,
94vw -170px 0;

animation: anim 5s linear infinite;
}

@keyframes anim{
100%{
top: 150%;
color: transparent;
}
}

雪はテキストで表現しています

このサンプルでは●(黒丸)を使って表現しています。

アスタリスク(*)などでも代用できます