CSSで作るホバーすると波紋状にリングが広がるエフェクト

CSSで簡単に波紋エフェクト作れないか考えていたところ、いいアイデアが思い浮かんだので紹介します。ホバーするとリングが波のように広がって消えます。

ソースコード

ハイクオリティーなエフェクトとなっています。

HOVER

HTMLはこんな感じでシンプルなマークアップです。

.button {
  display: block;
  width: 5.5em;
  height: 5.5em;
  margin: 2em auto 0;
  line-height: 5.5em;
  text-align: center;
  font-size: 40px;
  border-radius: 100%;
  background: #0288d1;
  box-shadow: 0 0 0 35px #424242, 0 0 0 40px #424242;
  overflow: hidden;
}
.button:hover {
  animation: ripple .6s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 #424242, 0 0 20px 0 #40c4ff;
  }
}

波紋部分の説明をすると、まず11行目では波紋が広がった状態の位置を設定しています。40-35 = 5pxがリングの太さとなります。次に19行目を見てみましょう。ここでは、マウスホバーしたときのリングの位置を指定しています。20pxという値はリングの外側をぼかしているものです。

いろいろ値を変えながら試してみるともっと面白いエフェクトが作れると思うので試してみてください。