ITハットMENUすべてのカテゴリーWeb制作93仕事効率化4Electron32015.07.14CSSで作るホバーすると波紋状にリングが広がるエフェクトCSSで簡単に波紋エフェクト作れないか考えていたところ、いいアイデアが思い浮かんだので紹介します。ホバーするとリングが波のように広がって消えます。ソースコードハイクオリティーなエフェクトとなっています。HOVERHTMLはこんな感じでシンプルなマークアップです。}}波紋部分の説明をすると、まず11行目では波紋が広がった状態の位置を設定しています。5pxがリングの太さとなります。次に19行目を見てみましょう。ここでは、マウスホバーしたときのリングの位置を指定しています。20pxという値はリングの外側をぼかしているものです。値を変えながら試してみるともっと面白いエフェクトが作れると思うので試してみてください。