今回は、これを作ってみました。
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のポジション取りが難しかった