せっかくの4連休ですが、なんの予定もありません。まだまだあちこち外出するのは怖いです。しかも連休初日は雨です。散歩くらいはしようと思ってましたが、この雨だとやる気が削がれますね。せっかく暇で、外は雨が降っているので、雨をCSSで表現できたら良いなと思い、やってみました。 雨を見てみる 雨を見てみると、たくさんの水滴が上から下に落ちています。これをCSSで表現できればよさそうです。 たくさんの水滴 水滴は英語でwater dropのようなので、.drop というdivを用意しました。そしてこれがたくさん必要なのですが、HTMLにたくさん書くのはなんだかなと思って、一つだけ用意して、画面読み込み時にJavaScriptで任意の数にコピーするようにしました。 const createDrops = () => { const rain = document.querySelector('.rai
![CSSで雨を表現する - 旧gaaamiiのブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b28583dfc383af772b55e67b5050ccc5d916e564/height=288;version=1;width=512/https%3A%2F%2Fgyazo.com%2Fe6b1bbc0afa98667d6e5f2d1a6c7f158.gif)