CSS桜ひらひらはこうして作りました

都内の桜ももう散りましたね。 先月、jsdo.itというJavascript, HTML5, CSSをブラウザ上でコード書いて共有できるサイトに、桜の花びらが舞うCSSアニメーションのコードをアップしました（Webkitブラウザ限定ですが）。 さーくらー ひらーひらー - jsdo.it これのbookmarklet版のコードも公開してます。 桜ひらひらbookmarklet - jsdo.it 今SafariかChromeを利用している方なら、下記のリンクをクリックすればこのページ内を桜の花びらが舞います。 桜ひらひらbookmarklet これをどうやって実現しているか今日は書きたいと思います。 まあ僕がやることはいつもたいしたことじゃありません。多少手間がかかることをちまちまやってるだけです。 ■花びら まず花びら。半分ずつ作ります。 下の画像はdivを加工していく過程で、左から右に