今年もいよいよホリデーシーズンがやってきますね。この記事ではクリスマスに活躍しそうなワクワクする装飾を集めてみました。コピペか、公式サイトからのZipファイルをダウンロードでも実装できますので、よかったら参考にしてみてくださいね。
※左下のResourcesボタンから使用している外部リソースが確認できます。

アニメーション系

クリスマスツリーのアニメーション

Merry Christmas Tree!
svgの曲線を上手に活用した華やかなクリスマスツリーアニメーション。（svg）

See the Pen Merry Christmas Tree! by Chris Gannon (@chrisgannon) on CodePen.

くるくるキャンディのアニメーション

Animated SVG Christmas Candy Gears
クリスマス模様のキャンディがくるくると回る装飾。（svg）

See the Pen Animated SVG Christmas Candy Gears by Mark Sottek (@mark_sottek) on CodePen.

流れ星が現れるアニメーション

Falling Star
ホバーエフェクトで紫色の星が流れ星へと変化します。（canvas）

See the Pen Falling Star by Pawel (@pawelqcm) on CodePen.

スノーフレークのアニメーション

Obligatory Falling Snow … but with Sparticles.js
美しいスノーフレークが特徴的なアニメーション。

See the Pen Obligatory Falling Snow … but with Sparticles.js by Simon Goellner (@simeydotme) on CodePen.

ゆっくり降るスノーアニメーション

Snow (Pure CSS)
没入感のある、ゆっくりと雪が降るアニメーション。CSSのみで実装できます。

See the Pen Snow (Pure CSS) by Gurprit Sahota (@gurprit) on CodePen.

キラキラな玉ボケの背景

Sparkle background , christmas background
街中のクリスマスライトを眺めているようなエフェクト。CSSのみで実装できます。

See the Pen Sparkle background , christmas background by Alena (@Alena0528a) on CodePen.

ドットのカラフルクリスマスツリー

Dash Holiday Tree
水玉でつくるポップなクリスマスツリーアニメーション。（SVG）

See the Pen Dash Holiday Tree by Tina Anastopoulos (@TWAIN) on CodePen.

テキスト系

グリッターテキスト

Alternating Sparkle Text
ゴールドとブルーのグリッターがかわいいテキスト装飾。

See the Pen Alternating Sparkle Text by Mark Sottek (@mark_sottek) on CodePen.

ホバーエフェクト系

手を振るサンタクロース

Waving Santa
かわいらしいサンタクロースの装飾。ホバーで表情が変化します。CSSのみで実装できます。

See the Pen Waving Santa by Codrin Pavel (@zerospree) on CodePen.

ミニマムクリスマスツリー

tiny christmas tree
ミニマムサイズのクリスマスツリーの装飾です。ホバーでオブジェクトがくるくる回転します。CSSのみで実装できます。

See the Pen tiny christmas tree by Gurprit Sahota (@gurprit) on CodePen.