<??>
<meta charset="utf-8">
<title>CSS3球狀網(wǎng)頁(yè)加載動(dòng)畫圖標(biāo)特效</title>
<???>
*, *:??, *:?? {
? ?? ?? ??: ??? ??;
? ??: 0;
? ??: 0;
}
:??, HTML, ?? {
? ?? ??: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
? ??: #222;
? ??: ??;
}
h1 {
? ??? ??: ??;
? ??: 1rem ?? 2rem;
? ?? ??: ??;
}
? {
? ??: 1rem;
}
.? {
? ??: 80%;
? ??: 150px;
? ??: 2rem ??;
}
.? {
? ?????: ??? ??;
? ??: 49%;
? ??? ??: ??;
}
.? {
? ?????: ??? ??;
? ??: 100px;
? ??: 100px;
? ??? ??: 50%;
? ??: whiteSmoke;
? ?? ???: 4px -40px 60px 5px rgb(26, 117, 206) ??;
}
.??? {
? ?????: ??? ??;
? ??: 100px;
? ??: 100px;
? ??? ??: 20px;
? ??: whiteSmoke;
? ?? ???: 4px -40px 60px 5px rgb(26, 117, 206) ??;
}

.?? {
? ??: ?? ?????(?????, rgb(22, 113, 202) 50%, ?? 50%);
? ?????: 1? ?? ?? ??;
}
.loader:?? {
? ?????: ??;
? ??: '';
? ??: ???;
? ??: 50%;
? ??: 50%;
? ??: ??(-50%, -50%);
? ??: 90px;
? ??: 90px;
? ??: #222;
? ??? ??: 50%;
}

.??? {
? ?????: ??? 0.5? ??;
}
@keyframes ??? {
? ??, { ??: scale(1, 1); }
? 25% { ??: scale(0.9, 1.1); }
? 50% { ??: scale(1.1, 0.9); }
? 75% { ??: scale(0.95, 1.05); }
}

.?? {
? ?????: 1? ?? ?? ??;
}
@keyframes ?? {
? { ??: ??(0deg); }
? { ??: ??(360deg); }
}

.?? ?? {
? ?????: ?? ?? 1? ?? ???;
}
@keyframes ?? ?? {
? { ??: ??(0deg); }
? { ??: ??(720deg); }
}

.?? {
? ?????: ?? 1? ?? ???? ??;
}
@keyframes ?? {
? { ??: ???(0.8); }
? { ??: scale(1.2); }
}

.??? {
? ?????: ??? 500ms ?? ?? ??;
}
@keyframes ??? {
{????: 1; }
{????: 0; }
}

.?? {
? ?????: ?? 1s? ??? ?????.
}
@keyframes? ????? {
? 30% { ??: scale(1.2); }
? 40%, 60% { ??: ??(-20deg) ???(1.2); }
? 50% { ??: ??(20?) ???(1.2); }
? 70% { ??: ??(0deg) ???(1.2); }
? 100% { ??: scale(1); }
}

.?? {
? ?????: ?? 2? ?? ??;
}
@keyframes ?? {
? { ??: scale(0); }
? { ??: scale(1); }
}

.???? {
? ?????: ???? 2s ?? ??;
}
@keyframes ??? ? {
? {????: 0; }
? {????: 1; }
}

.????? {
? ?????: ????? 2s ?? ??;
}
@keyframes ??? ?? {
? {????: 1; }
? {????: 0; }
}

.??? {
? ?????: 2? ?? ????? ??????.
}
@keyframes ??? {
? ? 70% { ??:??Y(0%); }
? ? 80% { ??:??Y(-15%); }
? ? 90% { ??:??Y(0%); }
? ? 95% { ??:??Y(-7%); }
? ? 97% { ??:??Y(0%); }
? ? 99% { ??:??Y(-3%); }
? ? 100% { ??:??Y(0); }
}

.bounce2 {
? ?????: Bounce2 2s ?? ??;
}
@keyframesounce2 {
0%, 20%, 50%, 80%, 100% {??: ??Y(0);}
40% {??: ??Y(-30px);}
60% {??: ??Y(-15px);}
}

.??? {
? ?????: ??? 2? ?? ??;
}
@keyframes ??? {
0%, 100% {??: ??X(0);}
10%, 30%, 50%, 70%, 90% {??: ??X(-10px);}
20%, 40%, 60%, 80% {??: ??X(10px);}
}

.?? {
?? ???: ?? !??;
?????: Flip 2s ?? ????;
}
@keyframes ??? {
0% {
??: ???(400px) ??Y(0);
????? ??? ??: ??;
}
40% {
??: ??(400px) ??Z(150px) ??Y(170deg);
????? ??? ??: ??;
}
50% {
??: ??(400px) ??Z(150px) ??Y(190deg) ??(1);
????? ??? ??: easy-in;
}
80% {
??: ??(400px) ??Y(360deg) ??(.95);
????? ??? ??: easy-in;
}
100% {
??: ???(400px) ??(1);
????? ??? ??: easy-in;
}
}

.?? {
??-??: ?? ??;
?????: Swing 2s ?? ????;
}
@keyframes ?? {
20% { ??: ??(15deg); }
40% { ??: ??(-10deg); }
60% { ??: ??(5deg); }
80% { ??: ??(-5deg); }
100% { ??: ??(0deg); }
}

.?? {
? ?????: ??? 2? ?? ??;
}
@keyframes ??? {
? 0% { ??: ??X(0%); }
? 15% { ??: ??X(-25%) ??(-5deg); }
? 30% { ??: ??X(20%) ??(3deg); }
? 45% { ??: ??X(-15%) ??(-3deg); }
? 60% { ??: ??X(10%) ??(2deg); }
? 75% { ??: ??X(-5%) ??(-1deg); }
? 100% { ??: ??X(0%); }
}

.?????? ??{
? ?????: ?????? ??2? ?? ??;
}
@keyframes ?????? ??{
? 0% {
? ? ????: 0;
? ? ??: ??Y(-20px);
? }
? 100% {
? ? ????: 1;
? ? ??: ??Y(0);
? }
}

.????-?? {
? ?????: ????-?? 2? ?? ??;
}
@keyframes ???? ??? ? {
? 0% {
? ? ????: 0;
? ? ??: ??X(-20px);
? }
? 100% {
? ? ????: 1;
? ? ??: ??X(0);
? }
}

.??????? {
? ?????: ??? ??-?? 2? ?? ??;
}
@keyframes ??? ?? ?? {
? 0% {
? ? ????: 1;
? ? ??: ??Y(0);
? }
? 100% {
? ? ????: 0;
? ? ??: ??Y(20px);
? }
}

.??? ?? ??? {
? ?????: ??? ??-??? 2? ?? ??;
}
@keyframes ??? ?? ??? {
? 0% {
? ? ????: 1;
? ? ??: ??X(0);
? }
? 100% {
? ? ????: 0;
? ? ??: ??X(20px);
? }
}

.???? {
? ?????: ???? 2? ?? ??;
}
@keyframes ???? {
? 0% {
? ? ????: 0;
? ? ??: ??(.3);
? }
? 50% {
? ? ????: 1;
? ? ??: ??(1.05);
? }
? 70% { ??: ???(.9); }
? 100% { ??: scale(1); }
}

.????? ??? {
? ?????: ????? ??? 2? ?? ?? ??;
}
@keyframes ????? ??? {
? 0% {
? ? ????: 0;
? ? ??: ??X(2000px);
? }
? 60% {
? ? ????: 1;
? ? ??: ??X(-30px);
? }
? 80% { ??: ??X(10px); }
? 100% { ??: ??X(0); }
}

.??? ?? {
? ?????: ??? ?? 2? ?? ??;
}
@keyframes ??? ?? {
? 0% { ??: scale(1); }
? 25% { ??: ???(.95); }
? 50% {
? ? ????: 1;
? ? ??: scale(1.1);
? }
? 100% {
? ? ????: 0;
? ? ??: ??(.3);
? }?
}

.bounce-out-down {
? ?????: ??? ??-?? 2? ?? ??;
}
@keyframes ????? {
? 0% { ??: ??Y(0); }
? 20% {
? ? ????: 1;
? ? ??: ??Y(-20px);
? }
? 100% {
? ? ????: 0;
? ? ??: ??Y(20px);
? }
}

.?? ??? ?? {
? ?????: ?? ??? ?? 2? ?? ??;
}
@keyframes ?? ??? ?? {
? 0% {
? ? ?? ??: ?? ??;
? ? ??: ??(-90deg);
? ? ????: 0;
? }
? 100% {
? ? ?? ??: ?? ??;
? ? ??: ??(0);
? ? ????: 1;
? }
}

.???? ???? ?? {
? ?????: ?? ?? ?? 2? ?? ??;
}
@keyframes ?? ?? ?? {
? 0% {
? ? ?? ??: ?? ??;
? ? ??: ??(90?);
? ? ????: 0;
? }
? 100% {
? ? ?? ??: ?? ??;
? ? ??: ??(0);
? ? ????: 1;
? }
}

.?? {
? ?????: ?? 2s ?? ??;
}
@keyframes ?? {
? 0% { ??: ??(0); ?? ??: ?? ?; ????? ??? ??: easy-in-out; } ?
? 20%, 60% { ??: ??(80deg); ?? ??: ?? ?; ????? ??? ??: easy-in-out; } ?
? 40% { ??: ??(60deg); ?? ??: ?? ?; ????? ??? ??: easy-in-out; }?
? 80% { ??: ??(60deg) ??Y(0); ????: 1; ?? ??: ?? ?; ????? ??? ??: easy-in-out; }?
? 100% { ??: ??Y(700px); ????: 0; }
}

.?? {
? ?????: ?? 2s ?? ????;
}
@keyframes ?? {
? 0% {
? ? ????: 0;
? ? ??: ??X(-100%) ??(-120deg);
? }
? 100% {
? ? ????: 1;
? ? ??: ??X(0px) ??(0deg);
? }
}

.??? {
? ?????: ??? 2s ?? ??;
}
@keyframes ?? {
? ? 0% {
? ? ????: 1;
? ? ??: ??X(0px) ??(0deg);
? }
? 100% {
? ? ????: 0;
? ? ??: ??X(100%) ??(120deg);
? }
}
</???>

</??>
<body><script src="/demos/googlegg.js"></script>
<h1>CSS ?????</h1>
<div class="row">
? <div class="cell">
? ? <div class="?? ??"></div>
? ? <p>??</p>
? </div>
? <div class="cell">
? ? <div class="?? ???"></div>
? ? <p>???</p>
? </div>
</div>
<div class="row">

? ?? CSS3 ??? CSS3 ??? ?????. CSS3??? CSS3? ???? CSS3? ?????.