丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。ARTICLE【FE風花雪月】煤闇の章、ハードクラシック攻略4日目【ファイアーエムブレム】HOME技術系css丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。丸い円からアイコンが飛び出してくる、カッコいいメニューアイコン作ってみた。丸い円からさらに小さいアイコンが飛び出してくるというかっこいいメニューバーをcssだけで作ってみた。正式名称は分からない。transformを使って動きを付ける。他にもかっこいいメニューバーを作ってみる。まとめ実際に実装してみる。CodePen.0正式名称がわからないので、まずは実際に実装してみた。実装自体は、以前記事にした、cssとradioボタンを使ってタブのような挙動を実装する。書いたinput要素を使ってcssでクリックイベントを取得し、checkboxがクリックされると、アイコンが出てくるようにしているだけである。アイコンが飛び出してきて少しカッコいい作りに出来た。(アイコンの種類が色々おかしいが)transformを使って動きを付ける。次に、transformを使って動きを付けてみた。CodePen.0クリックすると、くるくる回転しながらアイコンが下りてくるようになる。transformプロパティとは、transformプロパティは、要素に2D変形、または、3D変形を適用する際に使用するものである。要は画像を変形させるのに使うプロパティである。画像のトリミングなどの際によく使われるのだが、transitionプロパティと組み合わせることで、cssだけで動きを付けることが可能になる。今回はrotateというプロパティを使って回転させてみた。他にもtranslateX(x軸の移動)・translateY(y軸の移動)や、scale(画像を拡大)といった機能がある。今回はpositionを使って位置を変化させているが、このtranslateを使って表示することも可能である。他にもかっこいいメニューバーを作ってみる。CodePen.0他にもいろいろ工夫して遊んでみた。順番に出てきているかのように見せかけている。「アイコンを設置した土台部分をrotateする」ことでくるくると回転しながらアイコンが出現するかのようにみせかけている。まとめ今回はcssを使ったカッコいい表示のメニューを実装してみた。最近はよくcssを使っている気がする。(というか、そうするとcodepenを使えるので記事にしやすい)業務的にはshellや形態素解析を最近はやっているので、MacのPCを自宅に迎えられればその辺をまとめたい。cygwinを入れてはいるのだが、正直macのデフォルトターミナルの方が優秀だと思う。一番は変な方言なくコマンドが使えるlinux機。秘密警察になって住民を通報・脅迫しよう。Beholder(ビホルダー、見る人)やってみた。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。