波紋が広がりそうなタイトルですが、CSSの話で、事が起こるほうの波紋ではありません。 Dribbbleをぼーっと眺めていたら、きれいに波紋が広がるアニメーションがあって、CSSでできそうだったのでやってみました。 デモです DEMO PAGE マウスオーバーで波紋が広がるエフェクトがかかります。CSSのみで実装しています。まあ、良くあるやつです(自虐)。 四角いのと丸いのを作ってみましたが、四角いのはちょっと微妙。やっぱり丸のほうがしっくりきますね。下段の2つは、第二波があります。 実装方法 デモでは4種類(形が違うだけなので実質2種類)ありますが、スタンダードな「丸」の場合のものを載せておきます。 HTML <div class="box"> <a href="#">テキスト</a> </div> HTMLはこれだけです。 CSS .box { width: 100px; height: