CSSだけで簡単！画面に本格的な雪を降らせるアニメーション

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画面に雪を降らせるCSSです。HTMLとCSSのみで構成されているので、jQueryなどは必要ありません。

クリスマスなどに使用すると雰囲気が出ていいのですが、じっくり読ませたいページに適用するのはやめておきましょう。

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<div class="snows">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

/*** 雪玉（共通） ***/
.snows div{
  position: fixed; /*画面固定*/
  top: -250px; /*初期位置*/
  left: 0;
  border-radius: 50%; /*丸型*/
  background: #fff; /*雪の色*/
  opacity: 0.9; /*若干透明に*/
}

/*** 小さい雪玉 ***/
.snows div:nth-child(1){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 12s linear infinite;/*落下*/
}

/*** 小さい雪玉 (落下が少し遅い) ***/
.snows div:nth-child(2){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    7vw 220px 0 #fff,
    35vw 20px #fff,
    68vw 100px #fff,
    93vw -190px #fff;
  animation: fall 12.5s linear infinite;/*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 中ぐらいの雪玉 ***/
.snows div:nth-child(3){
  width: 14px;
  height: 14px;
  filter: blur(3px); /*ぼかし*/
  /* ±236pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear infinite; /*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 大きめの雪玉 ***/
.snows div:nth-child(4){
  width: 20px;
  height: 20px;
  filter: blur(8px); /*ぼかし*/
  /* ±230pxの範囲で影(複製)を作る */
  box-shadow:
    40vw -200px #fff,
    80vw 230px #fff;
  animation: fall 7s linear infinite; /*落下*/
  animation-delay: 4s; /*遅延*/
}

/*** 落下アニメーション ***/
@keyframes fall{
  0%{
    top: -250px; /*初期位置*/
  }
  100% {
    top: calc(100% + 250px); /*最終地点*/
  }
}

div 要素の白い丸を数パターン作り、box-shadow でたくさん複製。1つ辺りの雪玉の位置は、横0~100vw・高さ±250pxの範囲内で散りばめています。

雪玉共通 .snows div
- position: fixedで画面固定表示
- top: -250pxで初期表示位置に余裕を持たせる（ leftは0 ）
- border-radius: 50%で正円に
- background: #fffで白色に
- opacity: 0.9で少しだけ透明に
各雪玉の調整 .snows div:nth-child()
- width と height を指定して任意の大きさに
- box-shadowで複製をランダムにたくさん作る（box-shadow: 横オフセット縦オフセット色）
  - 位置（オフセット）は±250pxで治まる範囲に
- filter: blur()でぼかしを入れる
- animation: アニメーション名時間 linear infiniteを指定
- animation-delay で任意の遅延時間を設定
- 雪玉のぼかしと落下速度は玉の大きさに比例させると良い感じ
落下アニメーションを作成
- 0%時点で初期位置top: -250px
- 100%時点で雪玉の隠れる位置top: calc(100% + 250px)

吹雪verを作ろうと思いましたが、面倒なだけで需要0なのでやめました

画面に雪を降らせるアニメーション

CSSの解説