Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

息抜きがてらに読んでください(゚ー゚)
ポケモンやってたら野生のメタモンが出てきたので、CSSでメタモン作ってみました。
個人の技術不足な部分と、CSSだけだと限界があるなあと感じた瞬間でもありました...

メタモン

ポケモンをやったことある人ならほとんどの人が知っているポケモンですね。
ピカチュウに変身したメタモンが好きです。
スクリーンショット 2018-12-02 0.44.19.png
参照:メタモン|ポケモンずかん|ポケモンだいすきクラブ

まずは、うにょうにょさせたい

メタモンはうにょうにょなイメージがあります(主観)

CSSのborder-radius と CSS animationの組み合わせで
うにょうにょした円が作れます。

うねうね
モニョ.gif

中身はこんなかんじです。

style.scss
div {
  animation: unyo 3s linear alternate infinite;
}

@keyframes unyo {
  0% {
    border-radius: 50px 90px 60px 80px;
  }

  50% {
    border-radius: 80px 70px 90px 50px;
  }

  100% {
    border-radius: 90px 50px 80px 90px;
  }
}

CSSメタモン

先ほどのうにょうにょを使えば、
うにょうにょ感がでるメタモンが作れるんじゃないかと思ってせっせと作っていました。

う...うにょうにょ....?????

See the Pen CSS Metamon(Ditto) by Deren (@deren2525) on CodePen.


円を7つくらい用意して合体しています。
アニメーションは7つとも統一です。バラバラな動きをしているようにみえますが、7つとも微妙に角度が違うのでバラバラな動きに見えるかんじです。
border-radiusも、フレームも、細かくしています。正直、こんなに細かくすることもなかったなとも思っています。

style.scss
@keyframes metamon {
  0% {
    border-radius: 60px 90px 70px 80px / 80px 90px 70px 60px;
  }

  10% {
    border-radius: 50px 70px 90px 60px / 60px 90px 70px 80px;
  }

  20% {
    border-radius: 70px 60px 80px 90px / 90px 80px 60px 70px;
  }

  30% {
    border-radius: 50px 70px 90px 60px / 60px 90px 70px 50px;
  }

  40% {
    border-radius: 80px 60px 70px 90px / 90px 70px 50px 80px;
  }

  50% {
    border-radius: 90px 50px 60px 70px / 70px 60px 80px 90px;
  }

  60% {
    border-radius: 60px 70px 80px 90px / 90px 50px 70px 60px;
  }

  70% {
    border-radius: 70px 90px 60px 50px / 80px 60px 90px 70px;
  }

  80% {
    border-radius: 60px 80px 70px 90px / 90px 70px 80px 50px;
  }

  90% {
    border-radius: 80px 70px 90px 60px / 60px 90px 50px 80px;
  }

  100% {
    border-radius: 90px 50px 70px 80px / 80px 70px 60px 90px;
  }
}

まとめ

canvasでやればもっと細かい動きができるかなと思います。
作っていて、CSSでは限界があるなあと感じました。

だいぶ不恰好なメタモンになってしまいました...すまねえ...

追記(2018/11/09)

新たなメタモンが生まれていました。ありがとうございます。
私のメタモンよりもメタモンでした。勉強になりました!
インスパイアされて『うにょうにょしたメタモン』を描きたくなった。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away