CSS3 球状 Web ページ読み込みアニメーション アイコン特殊効果

<頭>
<メタ文字セット="utf-8">
<title>CSS3球状网页加下动画图标特效</title>
<スタイル>
*、 *：ビフォアーアフター {＃＃＃ ボックスのサイズ設定: ボーダーボックス;
マージン: 0;
パディング: 0;
}
:ルート、html、本文 {
フォントファミリー: 'Poiret One'、'Open Sans'、'Helvetica Neue'、'Helvetica'、'Arial'、サンセリフ;
背景: #222;
色: ホワイト;
}
h1 {
テキスト整列: 中央;
マージン: 1rem 自動 2rem;
フォントの太さ: 標準;
}
p {
マージン: 1レム;
}
。行 {＃＃＃ 幅: 80%;
高さ: 150px;
マージン: 2rem 自動;
}
.cell {
表示: インラインブロック;
幅: 49%;
テキスト整列: 中央;
}
。丸 {＃＃＃ 表示: インラインブロック;
幅: 100px;
高さ: 100px;
境界半径: 50%;
背景: 白煙;
ボックスシャドウ: 4px -40px 60px 5px rgb(26, 117, 206) インセット;
}
。四角 {＃＃＃ 表示: インラインブロック;
幅: 100px;
高さ: 100px;
境界半径: 20px;
背景: 白煙;
ボックスシャドウ: 4px -40px 60px 5px rgb(26, 117, 206) インセット;
}

.loader {
背景: 線形グラデーション(右へ、rgb(22, 113, 202) 50%、透明 50%);
アニメーション: スピン 1 秒の無限リニア;
}
.loader:前 {
表示ブロック;＃＃＃ コンテンツ： '';＃＃＃ 位置: 相対;
トップ: 50%;
左: 50%;
変換: 変換(-50%, -50%);
幅: 90px;
高さ: 90px;
背景: #222;
境界半径: 50%;
}

。ゼラチン {＃＃＃ アニメーション: ゼラチン 0.5 秒 無限;
}
@keyframes ゼラチン {
from、to {transform:scale(1, 1); }
25% { 変換: スケール(0.9, 1.1); }
50% { 変換: スケール(1.1, 0.9); }
75% { 変換: スケール(0.95, 1.05); }
}

.spin {
アニメーション: スピン 1 秒の無限リニア;
}
@keyframes スピン {
から { 変換: 回転(0度); }
に { 変換: 回転(360 度); }
}

.elastic-spin {
アニメーション: 弾性スピン 1 秒の無限の容易さ;
}
@keyframes 弾性スピン {
から { 変換: 回転(0度); }
に { 変換: 回転(720 度); }
}

。脈 {＃＃＃ アニメーション: パルス 1 秒の無限イーズインアウト代替;
}
@keyframes パルス {
{ 変換: スケール (0.8); から}
に { 変換: スケール(1.2); }
}

。閃光 {＃＃＃アニメーション: フラッシュ 500 ミリ秒イーズ無限代替;
}
@keyframes フラッシュ {
{ 不透明度: 1; から}
から { 不透明度: 0; }
}

。やあ {＃＃＃ アニメーション: ここ 1 秒で無限に楽になります;
}
ここの @keyframes {
30% { 変換: スケール(1.2); }
40%、60% { 変換: 回転(-20度) スケール(1.2); }
50% { 変換: 回転(20度) スケール(1.2); }
70% { 変換: 回転(0度) スケール(1.2); }
100% { 変換: スケール(1); }
}

。育つ {＃＃＃ アニメーション: 2 秒のイーズを無限に成長させます;
}
@keyframes は成長します {
{ 変換: スケール (0) から; }
に { 変換: スケール(1); }
}

。フェードイン {＃＃＃ アニメーション: フェードイン 2 秒リニア無限;
}
@keyframes フェードイン {
から { 不透明度: 0; }
{ 不透明度: 1; }
}

。フェードアウト {＃＃＃ アニメーション: フェードアウト 2 秒リニア無限;
}
@keyframes フェードアウト {
{ 不透明度: 1; から}
から { 不透明度: 0; }
}

。跳ねる、弾む {＃＃＃ アニメーション: バウンス 2 秒イーズ無限;
}
@keyframes バウンス {
70% { 変換:translateY(0%); }
80% { 変換:translateY(-15%); }
90% { 変換:translateY(0%); }
95% { 変換:translateY(-7%); }
97% { 変換:translateY(0%); }
99% { 変換:translateY(-3%); }
100% { 変換:translateY(0); }
}

.bounce2 {
アニメーション: bounce2 2s イーズ無限;
}
@keyframes bounce2 {
0%、20%、50%、80%、100% {transform:translateY(0);}
40% {変換:translateY(-30px);}
60% {変換:translateY(-15px);}
}

.shake {
アニメーション: 2 秒間振ると無限に楽になります;
}
@keyframes シェイク {
0%、100% {transform:translateX(0);}
10%、30%、50%、70%、90% {transform:translateX(-10px);}
20%、40%、60%、80% {transform:translateX(10px);}
}

.flip {
背面の可視性: 表示されます!重要;
アニメーション: 2 秒間イーズを無限に反転;
}
@keyframes フリップ {
0% {
変換: 視点(400px) 回転Y(0);
アニメーション タイミング関数: イーズアウト;
}
40% {
変換: 視点(400ピクセル) 変換Z(150ピクセル) 回転Y(170度);
アニメーション タイミング関数: イーズアウト;
}
50% {
変換: 視点(400ピクセル) 移動Z(150ピクセル) 回転Y(190度) スケール(1);
アニメーション タイミング関数: easy-in;
}
80% {
変換: 視点(400ピクセル) 回転Y(360度) スケール(.95);
アニメーション タイミング関数: easy-in;
}
100% {
変換: 視点(400px) スケール(1);
アニメーション タイミング関数: easy-in;
}
}

.swing {
変換原点: 中央上部;
アニメーション: スイング 2 秒のイーズ無限;
}
@keyframes スイング {
20% { 変換: 回転(15 度); }
40% { 変換: 回転(-10度); }
60% { 変換: 回転(5 度); }
80% { 変換: 回転(-5 度); }
100% { 変換: 回転(0度); }
}

。ぐらぐらする {＃＃＃ アニメーション: ウォブル 2 秒イーズ無限;
}
@keyframes がぐらつきます {
0% { 変換:translateX(0%); }
15% { 変換: 変換 X(-25%) 回転(-5 度); }
30% { 変換: 変換X(20%) 回転(3度); }
45% { 変換: 変換 X(-15%) 回転(-3 度); }
60% { 変換: 変換 X(10%) 回転(2 度); }
75% { 変換: 変換 X(-5%) 回転(-1 度); }
100% { 変換:translateX(0%); }
}

.フェードインダウン {
アニメーション: フェードインダウン 2 秒イーズ無限;
}
@keyframes フェードインダウン {
0% {
不透明度: 0;
変換:translateY(-20px);
}
100% {
不透明度: 1;
変換:translateY(0);
}
}

.fade-in-left {
アニメーション: フェードイン左 2 秒イーズ無限;
}
@keyframes フェードイン左 {
0% {
不透明度: 0;
変換:translateX(-20px);
}
100% {
不透明度: 1;
変換:translateX(0);
}
}

.fade-out-down {
アニメーション: フェードアウト - ダウン 2 秒で無限に緩和;
}
@keyframes フェードアウトダウン {
0% {
不透明度: 1;
変換:translateY(0);
}
100% {
不透明度: 0;
変換:translateY(20px);
}
}

.fade-out-right {
アニメーション: フェードアウト右 2 秒イーズ無限;
}
@keyframes フェードアウト右 {
0% {
不透明度: 1;
変換:translateX(0);
}
100% {
不透明度: 0;
変換:translateX(20px);
}
}

.bounce-in {
アニメーション: バウンスイン 2 秒イーズ無限;
}
@keyframes バウンスイン {
0% {
不透明度: 0;
変換: スケール(.3);
}
50% {
不透明度: 1;
変換: スケール(1.05);
}
70% { 変換: スケール(.9); }
100% { 変換: スケール(1); }
}

.bounce-in-right {
アニメーション: 右にバウンス 2 秒で無限に緩和;
}
@keyframes 右にバウンス {
0% {
不透明度: 0;
変換:translateX(2000px);
}
60% {
不透明度: 1;
変換:translateX(-30px);
}
80% { 変換:translateX(10px); }
100% { 変換:translateX(0); }
}

.バウンスアウト {
アニメーション: バウンスアウト 2 秒イーズ無限;
}
@keyframes バウンスアウト {
0% { 変換: スケール(1); }
25% { 変換: スケール(.95); }
50% {
不透明度: 1;
変換: スケール(1.1);
}
100% {
不透明度: 0;
変換: スケール(.3);
}
}

.bounce-out-down {
アニメーション: バウンスアウトダウン 2 秒イーズ無限;
}
@keyframes バウンスアウトダウン {
0% { 変換:translateY(0); }
20% {
不透明度: 1;
変換:translateY(-20px);
}
100% {
不透明度: 0;
変換:translateY(20px);
}
}

.rotate-in-down-left {
アニメーション: 左下に回転 2 秒で無限に緩和;
}
@keyframes 左下回転 {
0% {
変換原点: 左下;
変換: 回転(-90度);
不透明度: 0;
}
100% {
変換原点: 左下;
変換: 回転(0);
不透明度: 1;
}
}

.rotate-in-up-left {
アニメーション: 左上に回転 2 秒で無限に緩和;
}
@keyframes 左上回転 {
0% {
変換原点: 左下;
変換: 回転(90度);
不透明度: 0;
}
100% {
変換原点: 左下;
変換: 回転(0);
不透明度: 1;
}
}

.ヒンジ {
アニメーション: ヒンジ 2 のイーズ無限;
}
@keyframes ヒンジ {
0% { 変換: 回転(0);変換原点: 左上;アニメーション タイミング関数: イーズインアウト; }
20%、60% { 変換: 回転(80 度);変換原点: 左上;アニメーション タイミング関数: イーズインアウト; }
40% { 変換: 回転(60 度);変換原点: 左上;アニメーション タイミング関数: イーズインアウト; }
80% { 変換: 回転(60度) 平行移動Y(0);不透明度: 1;変換原点: 左上;アニメーション タイミング関数: イーズインアウト; }
100% { 変換:translateY(700px);不透明度: 0; }
}

.ロールイン {
アニメーション: ロールイン 2 秒イーズ無限;
}
@keyframes ロールイン {
0% {
不透明度: 0;
変換: 移動X(-100%) 回転(-120度);
}
100% {
不透明度: 1;
変換: 変換X(0px) 回転(0度);
}
}

。ロールアウトする {＃＃＃ アニメーション: ロールアウト 2 のイーズ無限;
}
@keyframes ロールアウト {
0% {
不透明度: 1;
変換: 変換X(0px) 回転(0度);
}
100% {
不透明度: 0;
変換: 変換X(100%) 回転(120度);
}
}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>
<h1>CSS アニメーション</h1>
<div class="行">
<div class="セル">
<div class="サークルローダー"></div>
<p>ローダー</p>
</div>
<div class="セル">
<div class="サークルゼラチン"></div>
<p>ゼラチン</p>
</div>
</div>
<div class="行">