ひよこの絵文字が大爆発するCSSが「なぜ爆発させた」「声出して笑った」とTwitterで反響を呼んでいます。ひよこおおおぉぉぉぉー!

 ひよこにカーソルをのせると、ひよこがプルプルと震えだし、熱を持ったように色が赤く変化。そして眩しいほどの光を放ちながらひよこが消えていきます。無音かつ、無駄に迫力のある爆発アニメーションがじわじわくる。

 Twitter上では「笑いが止まらない」「意味分からん過ぎてクソワロタ」「これ爆発ってより第二形態に変身するヤツや」と笑いを呼び、絵文字のアニメーションに「こんなことができるのか」「初めて知ったw」なんて声も寄せられています。

ひよこ 大爆発 CSS 絵文字 filter関数

ひよこにマウスのカーソルをのせると

 

ひよこ 大爆発 CSS 絵文字 filter関数

プルプルプルプル……

 

ひよこ 大爆発 CSS 絵文字 filter関数

ピカッ

 

ひよこ 大爆発 CSS 絵文字 filter関数

ドッカーン!

 投稿者はterrierscript(@terrierscript)さん。きっかけは「えっ!?絵文字ってfilter関数適応できんの?」と気づいたことがきっかけ。テンションが上がった結果、ひよこが爆発するCSSを書いていたそうです。なぜそうなった。

 オンラインエディタのCodeSandboxで書いてソースを公開しているので、自分で何回もひよこを爆発させたり、アニメーションの設定などを見ることができます。アニメーション名(「@keyframes」の後)もしっかり「explosion(爆発)」になっているあたり、偶然とかではなく、完全にひよこを爆発させるという強い意志を感じる。

 ちなみに絵文字の中で「前を向いているひよこ」を選んだ理由については、「あんまり色数が多く無くてそこそこ見栄えがするというだけ」で、「ひよこは何も悪くない」と追記しています。

ひよこ大爆発CSSはこちら

 

見た目で選ばれたようです

画像提供:terrierscript(@terrierscript)さん