CSS3-Spezialeffekt für sphärische Webseiten-Ladeanimationssymbole

<Kopf>
<meta charset="utf-8">
<title>CSS3球状网页加载动画图标特效</title>
<Stil>
*, *:before, *:after {
  Boxgröße: border-box;
  Rand: 0;
  Polsterung: 0;
}
:root, html, body {
  Schriftfamilie: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', Sans-Serif;
  Hintergrund: #222;
  Farbe: weiß;
}
h1 {
  text-align: center;
  Rand: 1rem auto 2rem;
  Schriftstärke: normal;
}
p {
  Rand: 1rem;
}
.row {
  Breite: 80 %;
  Höhe: 150px;
  Rand: 2rem auto;
}
.cell {
  Anzeige: inline-block;
  Breite: 49 %;
  text-align: center;
}
.circle {
  Anzeige: inline-block;
  Breite: 100px;
  Höhe: 100px;
  Randradius: 50 %;
  Hintergrund: weißer Rauch;
  Box-Shadow: 4px -40px 60px 5px rgb(26, 117, 206) Einschub;
}
.square {
  Anzeige: inline-block;
  Breite: 100px;
  Höhe: 100px;
  Randradius: 20px;
  Hintergrund: weißer Rauch;
  Box-Shadow: 4px -40px 60px 5px rgb(26, 117, 206) Einschub;
}

.loader {
  Hintergrund: linearer Farbverlauf (nach rechts, RGB(22, 113, 202) 50 %, transparent 50 %);
  Animation: 1s unendlich linear drehen;
}
.loader:before {
  Anzeige: blockieren;
  Inhalt: '';
  Position: relativ;
  oben: 50 %;
  übrig: 50 %;
  transform: Translate(-50%, -50%);
  Breite: 90px;
  Höhe: 90px;
  Hintergrund: #222;
  Randradius: 50 %;
}

.Gelatine {
  Animation: Gelatine 0,5s unendlich;
}
@keyframes Gelatine {
  von, nach { transform: scale(1, 1); }
  25 % { transform: scale(0.9, 1.1); }
  50 % { transform: scale(1.1, 0.9); }
  75 % { transform: scale(0.95, 1.05); }
}

.spin {
  Animation: 1s unendlich linear drehen;
}
@keyframes drehen {
  from { transform: rotate(0deg); }
  zu { transform: rotation(360deg); }
}

.elastic-spin {
  Animation: Elastic-Spin 1s unendliche Leichtigkeit;
}
@keyframes elastischer Spin {
  from { transform: rotate(0deg); }
  zu { transform: rotation(720deg); }
}

.pulse {
  Animation: 1 Sekunde lang pulsieren, abwechselnd leicht ein- und aussteigen;
}
@keyframes Puls {
  from { transform: scale(0.8); }
  zu { transform: scale(1.2); }
}

.flash {
  Animation: Blitz 500 ms, einfache unendliche Abwechslung;
}
@keyframes blinken {
von { Deckkraft: 1; }
zu { Deckkraft: 0; }
}

.hier {
  Animation: hier 1s einfach unendlich;
}
@keyframes hierher {
  30 % { transform: scale(1.2); }
  40 %, 60 % { transform: rotation(-20deg) scale(1.2); }
  50 % { transform: rotation(20deg) scale(1.2); }
  70 % { transform: rotate(0deg) scale(1.2); }
  100 % { transform: scale(1); }
}

.grow {
  Animation: 2 Sekunden wachsen lassen, Leichtigkeit unendlich;
}
@keyframes wachsen {
  from { transform: scale(0); }
  zu { transform: scale(1); }
}

.einblenden {
  Animation: Einblendung 2s linear unendlich;
}
@keyframes Einblendung {
  von { Deckkraft: 0; }
  zu { Deckkraft: 1; }
}

.fade-out {
  Animation: Ausblenden 2s linear unendlich;
}
@keyframes-Ausblendung {
  von { Deckkraft: 1; }
  zu { Deckkraft: 0; }
}

.bounce {
  Animation: Bounce 2s Leichtigkeit unendlich;
}
@keyframes springen {
    70 % { transform:translateY(0 %); }
    80 % { transform:translateY(-15 %); }
    90 % { transform:translateY(0 %); }
    95 % { transform:translateY(-7 %); }
    97 % { transform:translateY(0 %); }
    99 % { transform:translateY(-3 %); }
    100 % { transform:translateY(0); }
}

.bounce2 {
  Animation: bounce2 2s Leichtigkeit unendlich;
}
@keyframes bounce2 {
0 %, 20 %, 50 %, 80 %, 100 % {transform: translatorY(0);}
40 % {transform: translatorY(-30px);}
60 % {transform: translatorY(-15px);}
}

.shake {
  Animation: 2 Sekunden lang schütteln, unendlich locker lassen;
}
@keyframes schütteln {
0 %, 100 % {transform: translatorX(0);}
10 %, 30 %, 50 %, 70 %, 90 % {transform: translatorX(-10px);}
20 %, 40 %, 60 %, 80 % {transform: translatorX(10px);}
}

.flip {
Sichtbarkeit der Rückseite: sichtbar !important;
Animation: Flip 2s erleichtert unendlich;
}
@keyframes umdrehen {
0 % {
transform: perspective(400px) rotateY(0);
Animation-Timing-Funktion: Easy-Out;
}
40 % {
transform: perspective(400px) translatorZ(150px) rotateY(170deg);
Animation-Timing-Funktion: Easy-Out;
}
50 % {
transform: perspective(400px) translatorZ(150px) rotateY(190deg) scale(1);
Animation-Timing-Funktion: easy-in;
}
80 % {
transformieren: Perspektive (400 Pixel), Drehung um Y (360 Grad), Skalierung (.95);
Animation-Timing-Funktion: easy-in;
}
100 % {
transform: Perspektive(400px) Skala(1);
Animation-Timing-Funktion: easy-in;
}
}

.swing {
transform-origin: oben in der Mitte;
Animation: 2 Sekunden schwingen, Leichtigkeit unendlich;
}
@keyframes schwingen {
20 % { transform: rotation(15deg); }
40 % { transform: rotieren(-10 Grad); }
60 % { transform: rotation(5deg); }
80 % { transform: rotation(-5deg); }
100 % { transform: rotieren(0deg); }
}

.wobble {
  Animation: Wobble 2s Leichtigkeit unendlich;
}
@keyframes wackeln {
  0% { transform: TranslateX(0%); }
  15 % { transform: translatorX(-25 %) rotate(-5deg); }
  30 % { transform: translatorX(20 %) rotate(3deg); }
  45 % { transform: translatorX(-15 %) rotate(-3deg); }
  60 % { transform: translatorX(10 %) rotate(2deg); }
  75% { transform: translatorX(-5%) rotate(-1deg); }
  100 % { transform: translatorX(0 %); }
}

.fade-in-down {
  Animation: Ein- und Ausblenden 2 Sekunden lang, unendlich;
}
@keyframes Ein- und Ausblenden {
  0 % {
    Deckkraft: 0;
    transform: translatorY(-20px);
  }
  100 % {
    Deckkraft: 1;
    transform: TranslateY(0);
  }
}

.fade-in-left {
  Animation: Fade-in-left 2s Leichtigkeit unendlich;
}
@keyframes fade-in-left {
  0 % {
    Deckkraft: 0;
    transform: translatorX(-20px);
  }
  100 % {
    Deckkraft: 1;
    transform: translatorX(0);
  }
}

.fade-out-down {
  Animation: Fade-out-down 2s Leichtigkeit unendlich;
}
@keyframes Fade-Out-Down {
  0 % {
    Deckkraft: 1;
    transform: TranslateY(0);
  }
  100 % {
    Deckkraft: 0;
    transformieren: translatorY(20px);
  }
}

.fade-out-right {
  Animation: Fade-out-right 2s Leichtigkeit unendlich;
}
@keyframes fade-out-right {
  0 % {
    Deckkraft: 1;
    transform: translatorX(0);
  }
  100 % {
    Deckkraft: 0;
    transformieren: translatorX(20px);
  }
}

.bounce-in {
  Animation: Bounce-in 2s Leichtigkeit unendlich;
}
@keyframes Bounce-in {
  0 % {
    Deckkraft: 0;
    transform: scale(.3);
  }
  50 % {
    Deckkraft: 1;
    transform: scale(1.05);
  }
  70 % { transform: scale(.9); }
  100 % { transform: scale(1); }
}

.bounce-in-right {
  Animation: Bounce-in-right 2s Leichtigkeit unendlich;
}
@keyframes bounce-in-right {
  0 % {
    Deckkraft: 0;
    transformieren: translatorX(2000px);
  }
  60 % {
    Deckkraft: 1;
    transform: translatorX(-30px);
  }
  80 % { transform: translatorX(10px); }
  100 % { transform: translatorX(0); }
}

.bounce-out {
  Animation: Bounce-out 2s Leichtigkeit unendlich;
}
@keyframes bounce-out {
  0% { transform: scale(1); }
  25 % { transform: scale(.95); }
  50 % {
    Deckkraft: 1;
    transform: scale(1.1);
  }
  100 % {
    Deckkraft: 0;
    transform: scale(.3);
  } 
}

.bounce-out-down {
  Animation: Bounce-out-down 2s Leichtigkeit unendlich;
}
@keyframes bounce-out-down {
  0% { transform: translatorY(0); }
  20 % {
    Deckkraft: 1;
    transform: translatorY(-20px);
  }
  100 % {
    Deckkraft: 0;
    transformieren: translatorY(20px);
  }
}

.rotate-in-down-left {
  Animation: 2 Sekunden nach innen, unten und links drehen, unendliche Leichtigkeit;
}
@keyframes rotieren-in-unten-links {
  0 % {
    transform-origin: links unten;
    transformieren: drehen (-90 Grad);
    Deckkraft: 0;
  }
  100 % {
    transform-origin: links unten;
    transformieren: rotieren(0);
    Deckkraft: 1;
  }
}

.rotate-in-up-left {
  Animation: Drehung nach innen, nach oben und nach links, 2 Sekunden lang, Leichtigkeit unendlich;
}
@keyframes rotieren-in-oben-links {
  0 % {
    transform-origin: links unten;
    transformieren: drehen (90 Grad);
    Deckkraft: 0;
  }
  100 % {
    transform-origin: links unten;
    transformieren: rotieren(0);
    Deckkraft: 1;
  }
}

.scharnier {
  Animation: Scharnier 2s erleichtert unendlich;
}
@keyframes Scharnier {
  0% { transform: rotieren(0); Transformationsursprung: oben links; Animation-Timing-Funktion: Easy-in-out; }  
  20 %, 60 % { transform: rotation(80deg); Transformationsursprung: oben links; Animation-Timing-Funktion: Easy-in-out; }  
  40 % { transform: rotation(60deg); Transformationsursprung: oben links; Animation-Timing-Funktion: Easy-in-out; } 
  80 % { transform: rotation(60deg) translatorY(0); Deckkraft: 1; Transformationsursprung: oben links; Animation-Timing-Funktion: Easy-in-out; } 
  100 % { transform: translatorY(700px); Deckkraft: 0; }
}

.roll-in {
  Animation: Roll-in 2s Leichtigkeit unendlich;
}
@keyframes Roll-in {
  0 % {
    Deckkraft: 0;
    transform: translatorX(-100%) rotate(-120deg);
  }
  100 % {
    Deckkraft: 1;
    transform: translatorX(0px) rotate(0deg);
  }
}

.roll-out {
  Animation: Roll-out 2s Leichtigkeit unendlich;
}
Einführung von @keyframes {
    0 % {
    Deckkraft: 1;
    transform: translatorX(0px) rotate(0deg);
  }
  100 % {
    Deckkraft: 0;
    transform: translatorX(100%) rotate(120deg);
  }
}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>
<h1>CSS-Animation</h1>
<div class="row">
  <div class="cell">
    <div class="circle loader"></div>
    <p>loader</p>
  </div>
  <div class="cell">
    <div class="circle gelatine"></div>
    <p>Gelatine</p>
  </div>
</div>
<div class="row">

Die CSS3-Transformation ist eine neue Methode zur CSS3-Transformation.