[CSS]横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader

HTMLはdiv要素をパネル分配置するだけ、あとはCSSのコピペで利用できるアニメーションがかわいいプリローダーを紹介します。

デモのキャプチャデモのアニメーション

実際の動作は、下記ページで確認できます。
div要素のサイズを変更することで、さまざまなサイズのパネルで楽しめます。

サイトのキャプチャ

Animated FlipPreloader

HTML

パネルの枚数分の空divとラッパーのdivで実装します。

CSS

まずは、基本となるスタイルシート。

あとは、各パネルの位置・カラー・重なり順・タイミングをずらして、スタイルシートを指定します。
パネル5枚それぞれ指定するので、けっこうなボリュームになります。

top of page

©2017 coliss