CSSオンリーの面白いエフェクト8選

CodePenで見つけたCSSオンリーの面白いエフェクト8選

2016年9月2日

Contents

CodePenには毎日、クールなアニメーションやエフェクトを実現する面白いコードがたくさん公開されています。新しいアイデアを試す実験的なコードもあり、目が離せません。
今回はその中でも、CSSだけで実現するエフェクトをいくつかご紹介します。

画像をクリックすると、ズームして詳細を表示してくれます。グリッドレイアウトのギャラリーサイトに使えそうですね。

ボタンのボーダーの色が美しいグラデーションで変化していき、ホバー時には背景がグラデーションに。色彩と色変化が非常に美しいです。

「Hello」の文字から伸びた、インパクトのある長いシャドウ。タイトルやロゴに使えそう。saasのミックスインです。

マウスを左右に動かすとページがめくれるアニマルブック。マウスの座標でページのめくれる枚数も決まるようです。背表紙まで、ちゃんと作り込まれています。

写真をダイアモンド型に配置したナビゲーション。デザインも美しく、インパクトがあります。

囲碁のゲームです。石を取ることはできないようですが、CSSだけでここまでできる！と思わせてくれる作品。碁盤や碁石の質感がいいですね。

サンリオのあのキャラクターにそっくりの「KEROPPI」。SVGではなく、純粋なcssで描かれています。マウスオーバーで目を閉じるところがキュート。

CSSのみで作られたRPGです。ゲーム機能はありませんが、左上にある方向ボタンをクリックするとキャラクターが動き、話しかけたり物を調べたり部屋を移動することもできます。

コーディングの最先端をいくCodePenには、他にもたくさんの面白いエフェクトが公開されています。コピーして使うのもいいですが、コードを参考に、新しいエフェクトづくりに挑戦してみてもいいですね。