css で ParrotアニGIF みたいなの - Uni-Q blog

はじめに これは 第2のドワンゴ Advent Calendar 24日目の記事として書かれた記事です。 自己紹介 こんにちわ。元ドワンゴのデザイナー id:uniq です。 ドワンゴというと何故か ParrotアニGIF を思い出しました。 なので、なんとなくCSSでチカチカクルクルするやつだけでもやってみます。 やってみる まずCSSで丸い表現 HTMLてきとうに用意。 <div class="layout"> <div class="parrot"> </div> </div> CSSもてきとうに。 border-radius で円の直径を指定するのだけど、全体の幅 width と高さ height を指定しているのであれば、「%」つかうと楽。 .layout { padding: 20px 50px; } .parrot { border-radius: 50%; width: 5