CSS3で作るメニューに使えるスタイリッシュなホバーエフェクト

デモ

Menuにマウスをもっていくとエフェクトがでます。以下では、作り方を説明していきます。

基本部分をつくる

Menu

a {
  display: block;
  position: relative;
  padding: 12px 14px;
}
a span {
  display: block;
  position: relative;
  color: #fff;
  font-size: 22px;
  z-index: 7;
}

背景のボックスをつくる

a {
  display: block;
  position: relative;
  padding: 12px 14px;
}
a span {
  display: block;
  position: relative;
  color: #fff;
  font-size: 22px;
  z-index: 7;
}
a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -moz-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -ms-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -o-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -webkit-transform: skew(-60deg) scaleX(1.5);
  -moz-transform: skew(-60deg) scaleX(1.5);
  -ms-transform: skew(-60deg) scaleX(1.5);
  transform: skew(-60deg) scaleX(1.5);
  z-index: 6;
}

擬似要素 :after を使って黒の背景ボックスをつくります。重なりの順番を指定していることに注意してください。z-index の指定を消すとMenuと黒い背景ボックスの重なり順が逆になってしまいます。

ホバー時に形状を変える

a {
  display: block;
  position: relative;
  padding: 12px 14px;
}
a span {
  display: block;
  position: relative;
  color: #fff;
  font-size: 22px;
  z-index: 7;
}
a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -moz-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -ms-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -o-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -webkit-transform: skew(-60deg) scaleX(1.5);
  -moz-transform: skew(-60deg) scaleX(1.5);
  -ms-transform: skew(-60deg) scaleX(1.5);
  transform: skew(-60deg) scaleX(1.5);
  z-index: 6;
}
a:hover:after {
  -webkit-transform: skew(-10deg) scaleX(1);
  -moz-transform: skew(-10deg) scaleX(1);
  -ms-transform: skew(-10deg) scaleX(1);
  transform: skew(-10deg) scaleX(1);
}

ホバーしたら傾きの角度が小さくなるようにします。

ホバー時にフェードさせる

a {
  display: block;
  position: relative;
  padding: 12px 14px;
}
a span {
  display: block;
  position: relative;
  color: #fff;
  font-size: 22px;
  z-index: 7;
}
a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  -webkit-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -moz-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -ms-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -o-transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  transition: .3s cubic-bezier(0.4, 0.09, 0, 1.6);
  -webkit-transform: skew(-60deg) scaleX(1.5);
  -moz-transform: skew(-60deg) scaleX(1.5);
  -ms-transform: skew(-60deg) scaleX(1.5);
  transform: skew(-60deg) scaleX(1.5);
  z-index: 6;
}
a:hover:after {
  opacity: 1;
  -webkit-transform: skew(-10deg) scaleX(1);
  -moz-transform: skew(-10deg) scaleX(1);
  -ms-transform: skew(-10deg) scaleX(1);
  transform: skew(-10deg) scaleX(1);
}

21行目と34行目を見てください。最初は opacity: 0; で隠しておいて、ホバーすると opacity: 1; でフェードインさせるようにします。