Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

2016年 Emoji Advent Calendar 大トリ

おはようございますの方はおはようございます。
こんにちわの方はこんにちわ。
こんばんわの方はこんばんわ。
てぃーびーです。

この記事は絵文字 / Emoji Advent Calendar 2016 - Qiitaの25日目の記事です。
2016年のEmojiライフ、いかがお過ごしでしょうか?
2016年のEmoji Advent Calendar もついに最終日となりました。

最後。
つまり大トリです。
では、ご覧ください!

🐔

大トリ!

・・・ということで出落ちでした。

シルエットだけにする

  • 環境によっては最初からシルエットだけです
  • Firefoxの一部バージョンではシルエット表示されません
<span style="font-size:75px;color: transparent;text-shadow: 1px 1px 1px  red;">🐔</span>

🐔

回転させる

Font Awesomeの fa-spin を使って回転させてみます。

<span style="font-size:75px;" class="fa-spin">🐔</span>

🐔

揺らす

CSShake を使って 🐔 を揺らしてみましょう。

CSShake についてはこちらの記事をご確認ください。

tbpgr.hatenablog.com

<span style="font-size:75px;" class="shake">🐔</span>

🐔

トリにフォーカスしてみてください。

Animation CSS

Animation CSS であれこれ動かしてみましょう

Animation CSS の設定自体については下記記事でご確認ください。

github.com

bounce

なんというコッコ感

<div style="font-size:75px;" class="animated infinite bounce">🐔</div>
🐔

rubberBand

<div style="font-size:50px;" class="animated infinite rubberBand">🐔</div>
🐔

bounceInRight

<div style="font-size:50px;" class="animated infinite bounceInRight">🐣</div>
<div style="font-size:50px;" class="animated infinite bounceInRight">   🐤</div>
<div style="font-size:50px;" class="animated infinite bounceInRight">      🐔</div>
🐣
   🐤
      🐔

まとめ

文字に動きをつける場合にくらべてEmojiに動きをつけるのは当社比 10 倍はワクワクしました。

関連資料