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

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のポジション取りが難しかった