ネタCSSだけでマリオ(ドット絵)を作ってジャンプさせてみた恒例のPureCSSネタ第3弾です。今回は、ファミコン版スーパーマリオブラザーズのマリオを作ってみました。ドット絵って良いよね。...んで、ただドットを打つだけだと簡単すぎるという事に途中で気付いてしまったので、急遽アニメーションも加えることにしました。マリオがピョンピョンジャンプします。CodePen.制作時間は約2時間。意外と短め?今回頑張った所SCSSの@mixinを使いまくって、かなり効率よく作業を進めることが出来ました。ドット絵全体を囲うdiv要素にposition:relativeを指定して、ドット部分は下記の関数を使っています。#db2900;...と展開されます。X軸とY軸を直感的に指定出来るので、ミスったときの修正がめっちゃ楽でした。アニメーションについては、ただtranslateYで位置を動かしているだけです。「立ち」と「ジャンプ」の絵を比べて色が変化している部分は、animationで無理矢理色を変化させています。今回分かったこと根気があれば大体何でも作れる。【CSS】text-shadowを使ったテキストの装飾パターンを色々作ってみたAuthor名前:Leo26歳にしてようやくフリーターから脱却してWeb屋さんになった人。ライターみたいな事もするよ。あと雪国に住んでるけどバイクが好き。特技は後先考えずに突撃して自滅することです。