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

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

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

サイトのキャプチャ

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

サイトのキャプチャ

CSS Raindrops

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

サイトのキャプチャ

通常時

サイトのキャプチャ

フォーカスを雨に変更

サイトのキャプチャ

フォーカスを背景に変更

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

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

top of page

©2017 coliss