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

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

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

サイトのキャプチャ

Animated Shopping Cart Icons

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

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

デモのアニメーション

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

デモのアニメーション

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

デモのアニメーション

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

デモのアニメーション

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

デモのアニメーション

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

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

サイトのキャプチャ

デモページ

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

sponsors

top of page

©2018 coliss