[CSS]癒されたい人へ！窓越しの雨粒がどんどん増えていくスタイルシート -CSS Raindrops

以前、JavaScriptで雨を再現した癒やし系スクリプトを紹介しましたが、今日紹介するのはスクリプト無し、CSS3アニメーションで実装する窓越しに楽しむ雨粒を紹介します。

キャプチャは静止画ですが、CSS3アニメーションで雨粒がどんどん増えていきます。

デモは、Chrome, SafariなどのWebkit系、IEは最新の11でお楽しみください。
雨粒だけならFirefoxでもOK、フォーカス変更はダメ。

CSS Raindrops

このスタイルシートのデモがすごいのは雨粒だけでなく、フォーカスを変えてアニメーションを楽しむこともできます。

通常時

フォーカスを雨に変更

フォーカスを背景に変更

ちなみに、以前紹介したスクリプトで実装するのはこちら。

• ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js

2ヵ月ぶりに見てみたら、いろいろパワーアップしてました！