今回は、これを作ってみました。

code.penを見てもらうとわかりますが、HTMLとCSS(SCSS)だけで作ってます。

参考

デジタルマーケティングカンパニー 株式会社PLAN-B(プランビー)
https://www.plan-b.co.jp/

これの、MVの背景イメージが縦に分割されてアニメーションも気持ち良いですが、ボタンホバー時に「+」から「↓」にアニメーションする細かな演出が小気味良いなと思いました。
これは真似したいと思ったので、真似してみました。

ポイント

  • aタグの中にspan(.bar-Wrapper)を入れて、その中に3つのspan(.bar←棒線用)を入れてます
  • 構成
    • bar–01:縦線
    • bar–02:横線
    • bar–03:ホバーしてから現れる(デフォルトは横線と同じ)
  • hoverした時の、bar–02とbar–03のポジション取りが難しかった