丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。

丸い円があり、そこをhoverもしくはclickすると、
丸い円からさらに小さいアイコンが飛び出してくるというかっこいいメニューバーをcssだけで作ってみた。
正式名称は分からない。

実際に実装してみる。

See the Pen cool menu by blue (@aoiBlue) on CodePen.0

transformを使って動きを付ける。

次に、transformを使って動きを付けてみた。

See the Pen cool menu by blue (@aoiBlue) on CodePen.0

transformプロパティとは、

するものである。
要は画像を変形させるのに使うプロパティである。
画像のトリミングなどの際によく使われるのだが、
transitionプロパティと組み合わせることで、cssだけで動きを付けることが可能になる。
今回はrotateというプロパティを使って回転させてみた。
他にもtranslateX(x軸の移動)・translateY(y軸の移動)や、scale(画像を拡大)といった機能がある。

今回はpositionを使って位置を変化させているが、このtranslateを使って表示することも可能である。

他にもかっこいいメニューバーを作ってみる。

See the Pen variaus cool menus by blue (@aoiBlue) on CodePen.0

まとめ

今回はcssを使ったカッコいい表示のメニューを実装してみた。
最近はよくcssを使っている気がする。(というか、そうするとcodepenを使えるので記事にしやすい)
業務的にはshellや形態素解析を最近はやっているので、
MacのPCを自宅に迎えられればその辺をまとめたい。

cygwinを入れてはいるのだが、正直macのデフォルトターミナルの方が優秀だと思う。
一番は変な方言なくコマンドが使えるlinux機。