2017年09月13日(水)
[CSS]横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader
.flip-preloader div:nth-child(1) {
left: 0%;
background-color: #44B3C2;
animation-name: flipPreloader1;
z-index: 1;
}
.flip-preloader div:nth-child(2) {
left: 20%;
background-color: #F1A94E;
animation-name: flipPreloader2;
z-index: 2;
}
.flip-preloader div:nth-child(3) {
left: 40%;
background-color: #E45641;
animation-name: flipPreloader3;
z-index: 3;
}
.flip-preloader div:nth-child(4) {
left: 60%;
background-color: #5D4C46;
animation-na...
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
UXの向上に欠かせないパフォーマンスの重要性
NEXT ›
Webページで使用されているスクリプト・プラグイン・テクノロジーが何なのかがすぐに分かるChromeの機能拡張 -WhatRuns
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『[CSS]横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader』についてまとめています。
この記事は特にアニメーションについて書かれており、 HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。