インスパイアされて『うにょうにょしたメタモン』を描きたくなった。

はじめに

昼飯を食べながらネットサーフィンしていると、こんな記事を見つけた。

【CSS】うにょうにょしたメタモンが作りたかった..【円をうにょうにょ】

ので、私もやってみたくなった。

ちなみに、この記事に書かれているコードには、綺麗さなんてものはない。メタモンのためならば、あらゆるものを犠牲にする「覚悟」と「準備」ができている。

書いた

CSS で何かを描いたことなんてない私にできることは、絶対配置でゴリ押すことくらいだ。
それに適当なアニメーションを付与して動かせば、良い感じのメタモンになるはずだ。

HTML を書く

まずはいつもどおり HTML を書く。顔、胴体をdiv要素で分けた。

目はbefore, after擬似要素で書くので、div要素ひとつで問題ないが、口に使う要素は2つ用意しておく。胴体は歪ませた円で構成する予定だが、何個使うかわからないので、とりあえず12, 3個のdiv要素を置いた。

<div class="monster">
    <div class="face">
        <div class="eye"></div>
        <div class="mouth">
            <div class="mouth_outer"></div>
            <div class="mouth_inner"></div>
        </div>
    </div>
    <div class="body">
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
        <div class="metamon"></div>
    </div>
</div>

CSS を書く

次に CSS を書く。とりあえず、メタモンは書かず、メタモンを書くための枠を作る。幅や高さは固定にした。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, .monster {
    display: flex;
    justify-content: center;
}

.monster {
    position: relative;
    width: 800px;
    height: 800px;
    background: #000;
}

.face {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 400px;
    height: 300px;
    transform: translateX(-50%);
    border: 1px solid #ffa;
}

.body {
    width: 770px;
    height: 770px;
    background: #000;
    filter: blur(15px) contrast(30);
}

.metamon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ff69ff;
}

メタモンのシルエット(胴体)を描く

メタモンのシルエット(胴体)を作る。top, leftプロパティを調整してそれっぽくしていく。上半身と下半身で合計2つのアニメーションを作成し、そいつでwidthプロパティをいじってうにょうにょさせる。絶対配置で無理矢理配置するだけなので、特に工夫などはない。

完成

そうしてできたメタモンがこちら！
※ Windows 10: Google Chrome, Firefox, Opera で動作確認済み。

See the Pen Pure CSS Metamon(Ditto) by 墓石 (@boseki) on CodePen.

「なぞのばしょ」に佇み、静かにうごめくメタモンのような生物...。まるで、メタモンがメタモンに変身したような姿をしている。

...つまるところ、はっきり言って微妙な出来ということだ。もう少し時間をかけるべきだったかもしれない。色々と悔いは残るが、人生はCtrl + Zできない。立ち止らずに走り続けようと思う。

まとめ

衝動的に描いた。反省はしているが、後悔はしていない(公開はしているが)。
そして最後に、元ネタの記事に感謝。