イイダリョウのブログ。【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え2018-10-30【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替えCSS以前、CSSだけでドット絵がかけるのか、というシリーズをやってて、中断していたのですが、ツイッターで素敵なドット絵マリオ作品に出会ってまたモチベーションが湧いてきました。今回は立ちポーズを作って、ジャプポーズとhoverアクションで切り替えるところまで。クモのようにコツコツと今後のためにベースの無色16マスをベースを作成ツイッターで出会った作品、こちらです。box-shadowで作られていて、さらにジェネレーターまで提供されています。Companyドット絵マリオ、私もやってたこと思い出した。頑張らないと!そう、バニラCSSでね!!*1前回はいきなりジャンプポーズから入ったので、遅ればせながら今回は立ちポーズです。作り始めてすぐに思ったのですが、前のジャンプポーズを複製して改造したところ、どこまでが前回でどこまでが今打ってるいるドットなのか、わけがわからなくなったw今後のこともあるので、無色の16マスのベースを作りました。}まずCSS変数を一つ追加。none;としました。その方が見た目が揃ってドットが打ちやすい。CodePen.こうなります。右側の正方形部分です。var(--None);}(以下略)ジャンプするマリオはclass名を.mario_j、立ちマリオはmario_sにしてみました。CodePen.でけたぞーー!打っている間、無心になれましたw途中、ボタンが現れて新たな一色か?と思ったら肌色と同じ色でした。目の錯覚で黄色く見える。ミニマル3色が貫かれているなー。hoverアクションで切り替え次にこの2枚をhoverアクションで切り替えたい。立ちポーズがベースでカーソルを載せるとジャンプポーズにしたい。</div>全体を.spaceのdiv要素で囲います。2つのul要素にはmario_j、mario_sを追加。}.spaceはインラインブロックにする。(横幅いっぱいじゃなくて子要素のサイズになる).spaceのmario_jは非表示に。.spaceをhoverするとmario_jが表示になる。.spaceをhoverするとmario_sが非表示になる。こんなんでました!カーソルをマリオの上に載せてみてくだせい。次にやりたいことスマホでも動きが変わらないようにhoverじゃなくてタッチアクションにしたい。21:52Tweet関連記事2019-08-24【CSS】form用のリセット設定(ノーマライズCSS、リセットCSSとの比較)フォームのCSSって結構手間がかかったり、効いてくれなかったり...2019-06-03【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲ...Tone.jsの続きです。イブイブ...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。