[CSS]アイデアがいい！よく見かける普通のアイコンに一手間加えるスタイルシートのデモ

Post on:2014年5月16日

sponsors

ウェブページでよく見かけるアイコンをクリックやタップした時に、ちょっとしたアニメーションを加えたデモを紹介します。

かわいいアニメーションで楽しくなるだけでなく、アイコンをクリックしてどうなるのかが伝わる役目も果たしています。
無くても困らないけど、あると嬉しい演出っていいですね。

デモではフルーツショップのサイトを例に、カートに商品を入れたり、ギフトを選択したり、商品をファボったりした時に、ちょっとしたアニメーションを加えて、ユーザーを楽しませます。

たくさんあるデモの中から、少しだけアニメーションGIFにしてみました。

カートに商品を入れた時のアニメーション

後で読むをチェックした時のアニメーション

配送でギフトを選択した時のアニメーション

商品などをファボった時のアニメーション

配送について選択する時のアニメーション

各アニメーションはそれぞれ3パターン用意されており、どれもクリックしてちょっと幸せになれる演出ばかりです。

デモページは現在はChromeのみ対応、とのことです。