[CSS]癒されたい人へ!窓越しの雨粒がどんどん増えていくスタイルシート -CSS Raindrops
Post on:2013年11月29日
以前、JavaScriptで雨を再現した癒やし系スクリプトを紹介しましたが、今日紹介するのはスクリプト無し、CSS3アニメーションで実装する窓越しに楽しむ雨粒を紹介します。
キャプチャは静止画ですが、CSS3アニメーションで雨粒がどんどん増えていきます。
![サイトのキャプチャ](/wp-content/uploads-201303/2013112905-01.png)
デモは、Chrome, SafariなどのWebkit系、IEは最新の11でお楽しみください。
雨粒だけならFirefoxでもOK、フォーカス変更はダメ。
![サイトのキャプチャ](/wp-content/uploads-201303/2013112904.png)
このスタイルシートのデモがすごいのは雨粒だけでなく、フォーカスを変えてアニメーションを楽しむこともできます。
![サイトのキャプチャ](/wp-content/uploads-201303/2013112905-01.png)
通常時
![サイトのキャプチャ](/wp-content/uploads-201303/2013112905-02.png)
フォーカスを雨に変更
![サイトのキャプチャ](/wp-content/uploads-201303/2013112905-03.png)
フォーカスを背景に変更
ちなみに、以前紹介したスクリプトで実装するのはこちら。
2ヵ月ぶりに見てみたら、いろいろパワーアップしてました!
sponsors