CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

HTML

<div Klasse="Spinner"></div>

CSS

.spinner {
  Breite: 40px;
  Höhe: 40px;
  Hintergrundfarbe: #333;

  Rand: 100px automatisch;
  -Webkit-Animation: sk-Rotateplane 1,2 s unendliches Ein- und Ausfahren;
  Animation: sk-rotateplane 1,2 s unendliches Ein- und Ausfahren;
}

@-webkit-keyframes sk-rotateplane {
  0 % { -webkit-transform: Perspektive (120px) }
  50 % { -webkit-transform: Perspektive (120px) Y-Drehung (180 Grad) }
  100 % { -webkit-transform: Perspektive (120px) Y-Drehung (180 Grad) X-Drehung (180 Grad) }
}

@keyframes sk-rotateplane {
  0% { 
    transformieren: Perspektive (120px) X-Drehung (0 Grad) Y-Drehung (0 Grad);
    -webkit-transform: Perspektive (120px) X-Drehung (0 Grad) Y-Drehung (0 Grad) 
  } 50 % { 
    transformieren: Perspektive (120px) X-Drehung (-180,1 Grad) Y-Drehung (0 Grad);
    -webkit-transform: Perspektive (120px) X-Drehung (-180,1 Grad) Y-Drehung (0 Grad) 
  } 100% { 
    transformieren: Perspektive (120px) X-Drehung (-180 Grad) Y-Drehung (-179,9 Grad);
    -webkit-transform: Perspektive (120px) X-Drehung (-180 Grad) Y-Drehung (-179,9 Grad);
  }
}

Analyse: Definieren Sie ein div Element, stellen Sie die Seitenlänge auf 40 Pixel und den Hintergrund auf Weiß ein und legen Sie dann eine Loop-Flip-Animation fest, um die Ladeeffektanimation zu erzielen

Die Eigenschaft „Perspektive“ definiert den Abstand eines 3D-Elements von der Ansicht.

HTML

<div Klasse="sk-chase">
  <div Klasse="sk-chase-dot"></div>
  <div Klasse="sk-chase-dot"></div>
  <div Klasse="sk-chase-dot"></div>
  <div Klasse="sk-chase-dot"></div>
  <div Klasse="sk-chase-dot"></div>
  <div Klasse="sk-chase-dot"></div>
</div>

CSS

.sk-chase {
  Breite: 40px;
  Höhe: 40px;
  Position: relativ;
  Animation: SK-Chase 2,5 s unendlich linear beides;
}

.sk-chase-dot {
  Breite: 100 %;
  Höhe: 100%;
  Position: absolut;
  links: 0;
  oben: 0; 
  Animation: sk-chase-dot 2,0 s unendliches Ein- und Aussteigen, beides; 
}

.sk-chase-dot:vor {
  Inhalt: '';
  Anzeige: Block;
  Breite: 25 %;
  Höhe: 25%;
  Hintergrundfarbe: #fff;
  Randradius: 100 %;
  Animation: SK-Chase-Dot-vor 2,0 s unendliches Ein- und Ausblenden, beides; 
}

.sk-chase-dot:nth-child(1) { Animationsverzögerung: -1,1 s; }
.sk-chase-dot:nth-child(2) { Animationsverzögerung: -1,0 s; }
.sk-chase-dot:nth-child(3) { Animationsverzögerung: -0,9 s; }
.sk-chase-dot:nth-child(4) { Animationsverzögerung: -0,8 s; }
.sk-chase-dot:nth-child(5) { Animationsverzögerung: -0,7 s; }
.sk-chase-dot:nth-child(6) { Animationsverzögerung: -0,6 s; }
.sk-chase-dot:nth-child(1):vor { Animationsverzögerung: -1,1 s; }
.sk-chase-dot:nth-child(2):vor { Animationsverzögerung: -1,0 s; }
.sk-chase-dot:nth-child(3):vor { Animationsverzögerung: -0,9 s; }
.sk-chase-dot:nth-child(4):vor { Animationsverzögerung: -0,8 s; }
.sk-chase-dot:nth-child(5):vor { Animationsverzögerung: -0,7 s; }
.sk-chase-dot:nth-child(6):vor { Animationsverzögerung: -0,6 s; }

@keyframes sk-chase {
  100 % { transform: drehen (360 Grad); } 
}

@keyframes sk-chase-dot {
  80 %, 100 % { transform: drehen (360 Grad); } 
}

@keyframes sk-chase-dot-before {
  50 % {
    transformieren: Skalierung (0,4); 
  } 100 %, 0 % {
    transformieren: Skalierung (1,0); 
  } 
}

Analyse: Definieren Sie ein übergeordnetes Element div, das sechs weiße durchgezogene Punkte enthält, fügen Sie eine Rotationsanimation hinzu und legen Sie unterschiedliche Verzögerungszeiten fest, um den Effekt des Erscheinens in einer Sequenz zu erzielen

HTML

<div Klasse="Spinner">
  <div Klasse="double-bounce1"></div>
  <div Klasse="double-bounce2"></div>
</div>

CSS

.spinner {
  Breite: 40px;
  Höhe: 40px;

  Position: relativ;
  Rand: 100px automatisch;
}

.double-bounce1, .double-bounce2 {
  Breite: 100 %;
  Höhe: 100%;
  Randradius: 50 %;
  Hintergrundfarbe: #333;
  Deckkraft: 0,6;
  Position: absolut;
  oben: 0;
  links: 0;
  
  -Webkit-Animation: SK-Bounce 2,0 s unendliches Ein- und Ausfahren;
  Animation: SK-Bounce 2,0 s unendliches Ein- und Ausfahren;
}

.Doppel-Bounce2 {
  -Webkit-Animationsverzögerung: -1,0 s;
  Animationsverzögerung: -1,0 s;
}

@-webkit-keyframes sk-bounce {
  0 %, 100 % { -webkit-transform: scale(0.0) }
  50 % { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0 %, 100 % { 
    transformieren: Skalierung(0,0);
    -webkit-transform: Skalierung(0,0);
  } 50 % { 
    transformieren: Skalierung (1,0);
    -webkit-transform: Skalierung(1.0);
  }
}

Analyse: Um einen halbtransparenten Kreis zu realisieren, werden zwei Child-Div-Elemente verwendet. Sie werden absolut überlappend positioniert und dann wird dieselbe Animation so eingestellt, dass sie abwechselnd mit unterschiedlichen Verzögerungszeiten hinein- und herauszoomt.

HTML

<div Klasse="Spinner">
  <div Klasse="rect1"></div>
  <div Klasse="rect2"></div>
  <div Klasse="rect3"></div>
  <div Klasse="rect4"></div>
  <div Klasse="rect5"></div>
</div>

CSS

.spinner {
  Rand: 100px automatisch;
  Breite: 50px;
  Höhe: 40px;
  Textausrichtung: zentriert;
  Schriftgröße: 10px;
}

.spinner > div {
  Hintergrundfarbe: #333;
  Höhe: 100%;
  Breite: 6px;
  Anzeige: Inline-Block;
  
  -webkit-animation: sk-stretchdelay 1,2 s unendliches Ein- und Ausfahren;
  Animation: sk-stretchdelay 1,2 s unendliches Ein- und Ausfahren;
}

.spinner .rect2 {
  -Webkit-Animationsverzögerung: -1,1 s;
  Animationsverzögerung: -1,1 s;
}

.spinner .rect3 {
  -Webkit-Animationsverzögerung: -1,0 s;
  Animationsverzögerung: -1,0 s;
}

.spinner .rect4 {
  -Webkit-Animationsverzögerung: -0,9 s;
  Animationsverzögerung: -0,9 s;
}

.spinner .rect5 {
  -Webkit-Animationsverzögerung: -0,8 s;
  Animationsverzögerung: -0,8 s;
}

@-webkit-keyframes sk-stretchdelay {
  0 %, 40 %, 100 % { -webkit-transform: scaleY(0.4) }  
  20 % { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0 %, 40 %, 100 % { 
    transformieren: scaleY(0,4);
    -webkit-transform: MaßstabY(0,4);
  } 20% { 
    transformieren: scaleY(1.0);
    -webkit-transform: MaßstabY(1,0);
  }
}

Analyse: Unter dem spinner -Element befinden sich fünf rechteckige Div-Elemente. Die Skalierung der Y-Achse ist eingestellt und es werden unterschiedliche Verzögerungszeiten verwendet, um den Effekt sequentieller Änderungen zu erzielen.

HTML

<div Klasse="Spinner">
  <div Klasse="Würfel1"></div>
  <div Klasse="cube2"></div>
</div>

CSS

.cube1, .cube2 {
  Hintergrundfarbe: #333;
  Breite: 15px;
  Höhe: 15px;
  Position: absolut;
  oben: 0;
  links: 0;
  
  -Webkit-Animation: sk-cubemove 1,8 s unendliches Ein- und Ausfahren;
  Animation: sk-Cubemove, 1,8 s, unendliches Ein- und Ausfahren;
}

.cube2 {
  -Webkit-Animationsverzögerung: -0,9 s;
  Animationsverzögerung: -0,9 s;
}

@-webkit-keyframes sk-cubemove {
  25 % { -webkit-transform: translateX(42px) drehen(-90 Grad) skalieren(0,5) }
  50 % { -webkit-transform: translateX(42px) translateY(42px) drehen(-180 Grad) }
  75 % { -webkit-transform: translateX(0px) translateY(42px) drehen(-270 Grad) skalieren(0,5) }
  100 % { -webkit-transform: drehen(-360 Grad) }
}

@keyframes sk-cubemove {
  25 % { 
    transformieren: translateX(42px) drehen(-90 Grad) skalieren(0,5);
    -webkit-transform: translateX(42px) drehen(-90 Grad) skalieren(0,5);
  } 50 % { 
    transformieren: verschiebeX(42px) verschiebeY(42px) drehen(-179 Grad);
    -webkit-transform: übersetzenX(42px) übersetzenY(42px) drehen(-179 Grad);
  } 50,1 % { 
    transformieren: verschiebeX(42px) verschiebeY(42px) drehen(-180 Grad);
    -webkit-transform: übersetzenX(42px) übersetzenY(42px) drehen(-180 Grad);
  } 75 % { 
    transformieren: translateX(0px) translateY(42px) drehen(-270 Grad) skalieren(0,5);
    -webkit-transform: translateX(0px) translateY(42px) drehen(-270 Grad) skalieren(0,5);
  } 100% { 
    transformieren: drehen (-360 Grad);
    -webkit-transform: drehen(-360 Grad);
  }
}

Analyse: Zwei Unterelemente implementieren das weiße Quadrat, fügen Animationsattribute hinzu, legen die Bewegungsdistanz und Skalierung auf der X- und Y-Achse fest, trennen sie mit unterschiedlichen Verzögerungszeiten und verwenden rorate , um eine Rotation um die Mitte zu realisieren.

HTML

<div Klasse="Spinner"></div>

CSS

.spinner {
  Breite: 40px;
  Höhe: 40px;
  Rand: 100px automatisch;
  Hintergrundfarbe: #333;

  Randradius: 100 %;  
  -webkit-animation: sk-scaleout 1.0s unendliches Ein- und Ausfahren;
  Animation: SK-Scaleout 1,0 s unendliches Ein- und Ausfahren;
}

@-webkit-keyframes sk-scaleout {
  0 % { -webkit-transform: Skala(0) }
  100 % {
    -webkit-transform: Skalierung(1.0);
    Deckkraft: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: Skalierung(0);
    transformieren: Skalierung(0);
  } 100% {
    -webkit-transform: Skalierung(1.0);
    transformieren: Skalierung (1,0);
    Deckkraft: 0;
  }
}

Analyse: Das einzige div Element realisiert die weißen Hintergrundpunkte und der atmende Lichteffekt wird durch Einstellen von Skalierung und Transparenz erzielt.

HTML

<div Klasse="Spinner">
  <div Klasse="dot1"></div>
  <div Klasse="dot2"></div>
</div>

CSS

.spinner {
  Rand: 100px automatisch;
  Breite: 40px;
  Höhe: 40px;
  Position: relativ;
  Textausrichtung: zentriert;
  
  -Webkit-Animation: sk-rotate 2,0 s unendlich linear;
  Animation: SK-Rotation 2,0 s unendlich linear;
}

.dot1, .dot2 {
  Breite: 60%;
  Höhe: 60%;
  Anzeige: Inline-Block;
  Position: absolut;
  oben: 0;
  Hintergrundfarbe: #333;
  Randradius: 100 %;
  
  -Webkit-Animation: SK-Bounce 2,0 s unendliches Ein- und Ausfahren;
  Animation: SK-Bounce 2,0 s unendliches Ein- und Ausfahren;
}

.dot2 {
  oben: automatisch;
  unten: 0;
  -Webkit-Animationsverzögerung: -1,0 s;
  Animationsverzögerung: -1,0 s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: drehen(360 Grad) }}
@keyframes sk-rotate { 100% { transform: drehen(360 Grad); -webkit-transform: drehen(360 Grad) }}

@-webkit-keyframes sk-bounce {
  0 %, 100 % { -webkit-transform: scale(0.0) }
  50 % { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0 %, 100 % { 
    transformieren: Skalierung(0,0);
    -webkit-transform: Skalierung(0,0);
  } 50 % { 
    transformieren: Skalierung (1,0);
    -webkit-transform: Skalierung(1.0);
  }
}

Analyse: Die beiden ausgefüllten Kreise führen kreisförmige Skalierungs- und Rotationsbewegungen um den Mittelpunkt aus und weisen aufgrund der unterschiedlichen Verzögerungszeiten gleichzeitig entgegengesetzte Leistungen auf.

HTML

<div Klasse="Spinner">
  <div Klasse="bounce1"></div>
  <div Klasse="bounce2"></div>
  <div Klasse="bounce3"></div>
</div>

CSS

.spinner {
  Rand: 100px auto 0;
  Breite: 70px;
  Textausrichtung: zentriert;
}

.spinner > div {
  Breite: 18px;
  Höhe: 18px;
  Hintergrundfarbe: #333;

  Randradius: 100 %;
  Anzeige: Inline-Block;
  -webkit-animation: sk-bouncedelay 1,4 s unendliches Ein- und Aussteigen, beides;
  Animation: sk-Bouncedelay 1,4 s unendliches Ein- und Aussteigen, beides;
}

.spinner .bounce1 {
  -Webkit-Animationsverzögerung: -0,32 s;
  Animationsverzögerung: -0,32 s;
}

.spinner .bounce2 {
  -Webkit-Animationsverzögerung: -0,16 s;
  Animationsverzögerung: -0,16 s;
}

@-webkit-keyframes sk-bouncedelay {
  0 %, 80 %, 100 % { -webkit-transform: scale(0) }
  40 % { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0 %, 80 %, 100 % { 
    -webkit-transform: Skalierung(0);
    transformieren: Skalierung(0);
  } 40% { 
    -webkit-transform: Skalierung(1.0);
    transformieren: Skalierung (1,0);
  }
}

Analyse: Drei einfarbige Kreise sind horizontal angeordnet und die lineare scale geht von 0 bis 1. Durch unterschiedliche Verzögerungszeiten erzeugen sie einen wechselnden Effekt.

HTML

<div Klasse="sk-circle">
  <div Klasse="sk-circle1 sk-child"></div>
  <div Klasse="sk-circle2 sk-child"></div>
  <div Klasse="sk-circle3 sk-child"></div>
  <div Klasse="sk-circle4 sk-child"></div>
  <div Klasse="sk-circle5 sk-child"></div>
  <div Klasse="sk-circle6 sk-child"></div>
  <div Klasse="sk-circle7 sk-child"></div>
  <div Klasse="sk-circle8 sk-child"></div>
  <div Klasse="sk-circle9 sk-child"></div>
  <div Klasse="sk-circle10 sk-child"></div>
  <div Klasse="sk-circle11 sk-child"></div>
  <div Klasse="sk-circle12 sk-child"></div>
</div>

CSS

.sk-Kreis {
  Rand: 100px automatisch;
  Breite: 40px;
  Höhe: 40px;
  Position: relativ;
}
.sk-Kreis .sk-Kind {
  Breite: 100 %;
  Höhe: 100%;
  Position: absolut;
  links: 0;
  oben: 0;
}
.sk-Kreis .sk-Kind:vor {
  Inhalt: '';
  Anzeige: Block;
  Rand: 0 automatisch;
  Breite: 15%;
  Höhe: 15%;
  Hintergrundfarbe: #333;
  Randradius: 100 %;
  -webkit-animation: sk-circleBounceDelay 1,2 s unendliches Ein- und Ausfahren, beides;
          Animation: sk-circleBounceDelay 1,2 s unendliches Ein- und Ausfahren, beides;
}
.sk-Kreis .sk-Kreis2 {
  -webkit-transform: drehen (30 Grad);
      -ms-transform:drehen(30Grad);
          transformieren: drehen(30 Grad); }
.sk-Kreis .sk-Kreis3 {
  -webkit-transform: drehen (60 Grad);
      -ms-transform:drehen(60Grad);
          transformieren: drehen(60 Grad); }
.sk-Kreis .sk-Kreis4 {
  -webkit-transform: drehen(90 Grad);
      -ms-transform:drehen(90Grad);
          transformieren: drehen(90 Grad); }
.sk-Kreis .sk-Kreis5 ​​{
  -webkit-transform: drehen(120 Grad);
      -ms-transform:drehen(120Grad);
          transformieren: drehen(120 Grad); }
.sk-Kreis .sk-Kreis6 {
  -webkit-transform: drehen (150 Grad);
      -ms-transform:drehen(150Grad);
          transformieren: drehen(150 Grad); }
.sk-Kreis .sk-Kreis7 {
  -webkit-transform: drehen(180 Grad);
      -ms-transform:drehen(180Grad);
          transformieren: drehen(180 Grad); }
.sk-Kreis .sk-Kreis8 {
  -webkit-transform:drehen(210grad);
      -ms-transform:drehen(210grad);
          transformieren: drehen(210 Grad); }
.sk-Kreis .sk-Kreis9 {
  -webkit-transform: drehen(240 Grad);
      -ms-transform:drehen(240grad);
          transformieren: drehen(240 Grad); }
.sk-Kreis .sk-Kreis10 {
  -webkit-transform: drehen(270 Grad);
      -ms-transform:drehen(270Grad);
          transformieren: drehen(270 Grad); }
.sk-Kreis .sk-Kreis11 {
  -webkit-transform: drehen (300 Grad);
      -ms-transform:drehen(300 Grad);
          transformieren: drehen(300 Grad); }
.sk-Kreis .sk-Kreis12 {
  -webkit-transform: drehen(330 Grad);
      -ms-transform:drehen(330grad);
          transformieren: drehen(330 Grad); }
.sk-circle .sk-circle2:vor {
  -Webkit-Animationsverzögerung: -1,1 s;
          Animationsverzögerung: -1,1 s; }
.sk-circle .sk-circle3:vor {
  -Webkit-Animationsverzögerung: -1 s;
          Animationsverzögerung: -1s; }
.sk-circle .sk-circle4:vor {
  -Webkit-Animationsverzögerung: -0,9 s;
          Animationsverzögerung: -0,9 s; }
.sk-circle .sk-circle5:vor {
  -Webkit-Animationsverzögerung: -0,8 s;
          Animationsverzögerung: -0,8 s; }
.sk-circle .sk-circle6:vor {
  -Webkit-Animationsverzögerung: -0,7 s;
          Animationsverzögerung: -0,7 s; }
.sk-circle .sk-circle7:vor {
  -Webkit-Animationsverzögerung: -0,6 s;
          Animationsverzögerung: -0,6 s; }
.sk-circle .sk-circle8:vor {
  -Webkit-Animationsverzögerung: -0,5 s;
          Animationsverzögerung: -0,5 s; }
.sk-circle .sk-circle9:vorher {
  -Webkit-Animationsverzögerung: -0,4 s;
          Animationsverzögerung: -0,4 s; }
.sk-circle .sk-circle10:vor {
  -Webkit-Animationsverzögerung: -0,3 s;
          Animationsverzögerung: -0,3 s; }
.sk-circle .sk-circle11:vor {
  -Webkit-Animationsverzögerung: -0,2 s;
          Animationsverzögerung: -0,2 s; }
.sk-circle .sk-circle12:vor {
  -Webkit-Animationsverzögerung: -0,1 s;
          Animationsverzögerung: -0,1 s; }

@-webkit-keyframes sk-circleBounceDelay {
  0 %, 80 %, 100 % {
    -webkit-transform: Skalierung(0);
            transformieren: Skalierung(0);
  } 40% {
    -webkit-transform: Skalierung(1);
            transformieren: Skalierung(1);
  }
}

@keyframes sk-circleBounceDelay {
  0 %, 80 %, 100 % {
    -webkit-transform: Skalierung(0);
            transformieren: Skalierung(0);
  } 40% {
    -webkit-transform: Skalierung(1);
            transformieren: Skalierung(1);
  }
}

Analyse: Der gesamte Ladeeffekt besteht aus 12 Kreismittelpunkten. Um sie kreisförmig erscheinen zu lassen, werden unterschiedliche Rotationen eingestellt, und dann werden unterschiedliche Verzögerungszeiten eingestellt, um sie skalierbar zu machen.

HTML

<div Klasse="sk-cube-grid">
  <div Klasse="sk-cube sk-cube1"></div>
  <div Klasse="sk-cube sk-cube2"></div>
  <div Klasse="sk-cube sk-cube3"></div>
  <div Klasse="sk-cube sk-cube4"></div>
  <div Klasse="sk-cube sk-cube5"></div>
  <div Klasse="sk-cube sk-cube6"></div>
  <div Klasse="sk-cube sk-cube7"></div>
  <div Klasse="sk-cube sk-cube8"></div>
  <div Klasse="sk-cube sk-cube9"></div>
</div>

CSS

.sk-cube-grid {
  Breite: 40px;
  Höhe: 40px;
  Rand: 100px automatisch;
}

.sk-cube-grid .sk-cube {
  Breite: 33%;
  Höhe: 33%;
  Hintergrundfarbe: #333;
  schweben: links;
  -webkit-animation: sk-cubeGridScaleDelay 1,3 s unendliches Ein- und Ausfahren;
          Animation: sk-cubeGridScaleDelay 1,3 s unendliches Ein- und Ausfahren; 
}
.sk-cube-grid .sk-cube1 {
  -Webkit-Animationsverzögerung: 0,2 s;
          Animationsverzögerung: 0,2 s; }
.sk-cube-grid .sk-cube2 {
  -Webkit-Animationsverzögerung: 0,3 s;
          Animationsverzögerung: 0,3 s; }
.sk-cube-grid .sk-cube3 {
  -Webkit-Animationsverzögerung: 0,4 s;
          Animationsverzögerung: 0,4 s; }
.sk-cube-grid .sk-cube4 {
  -Webkit-Animationsverzögerung: 0,1 s;
          Animationsverzögerung: 0,1 s; }
.sk-cube-grid .sk-cube5 {
  -Webkit-Animationsverzögerung: 0,2 s;
          Animationsverzögerung: 0,2 s; }
.sk-cube-grid .sk-cube6 {
  -Webkit-Animationsverzögerung: 0,3 s;
          Animationsverzögerung: 0,3 s; }
.sk-cube-grid .sk-cube7 {
  -Webkit-Animationsverzögerung: 0 s;
          Animationsverzögerung: 0 s; }
.sk-cube-grid .sk-cube8 {
  -Webkit-Animationsverzögerung: 0,1 s;
          Animationsverzögerung: 0,1 s; }
.sk-cube-grid .sk-cube9 {
  -Webkit-Animationsverzögerung: 0,2 s;
          Animationsverzögerung: 0,2 s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0 %, 70 %, 100 % {
    -webkit-transform: scale3D(1, 1, 1);
            transformieren: scale3D(1, 1, 1);
  } 35 % {
    -webkit-transform: Maßstab 3D (0, 0, 1);
            transformieren: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0 %, 70 %, 100 % {
    -webkit-transform: scale3D(1, 1, 1);
            transformieren: scale3D(1, 1, 1);
  } 35 % {
    -webkit-transform: Maßstab 3D (0, 0, 1);
            transformieren: scale3D(0, 0, 1);
  } 
}

Analyse: Die neun Blöcke sind in grid angeordnet und bilden horizontal und vertikal jeweils drei Blöcke. Durch unterschiedliche Verzögerungszeiten werden lineare 3D-Skalierungsbewegungen ausgeführt.

HTML

<div Klasse="sk-fading-circle">
  <div Klasse="sk-circle1 sk-circle"></div>
  <div Klasse="sk-circle2 sk-circle"></div>
  <div Klasse="sk-circle3 sk-circle"></div>
  <div Klasse="sk-circle4 sk-circle"></div>
  <div Klasse="sk-circle5 sk-circle"></div>
  <div Klasse="sk-circle6 sk-circle"></div>
  <div Klasse="sk-circle7 sk-circle"></div>
  <div Klasse="sk-circle8 sk-circle"></div>
  <div Klasse="sk-circle9 sk-circle"></div>
  <div Klasse="sk-circle10 sk-circle"></div>
  <div Klasse="sk-circle11 sk-circle"></div>
  <div Klasse="sk-circle12 sk-circle"></div>
</div>

CSS

.sk-fading-circle {
  Rand: 100px automatisch;
  Breite: 40px;
  Höhe: 40px;
  Position: relativ;
}

.sk-fading-Kreis .sk-Kreis {
  Breite: 100 %;
  Höhe: 100%;
  Position: absolut;
  links: 0;
  oben: 0;
}

.sk-fading-circle .sk-circle:vorher {
  Inhalt: '';
  Anzeige: Block;
  Rand: 0 automatisch;
  Breite: 15 %;
  Höhe: 15%;
  Hintergrundfarbe: #333;
  Randradius: 100 %;
  -webkit-animation: sk-circleFadeDelay 1,2 s unendliches Ein- und Ausblenden, beides;
          Animation: sk-circleFadeDelay 1,2 s unendliches Ein- und Ausblenden, beides;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: drehen (30 Grad);
      -ms-transform:drehen(30Grad);
          transformieren: drehen (30 Grad);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: drehen (60 Grad);
      -ms-transform:drehen(60Grad);
          transformieren: drehen (60 Grad);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: drehen(90 Grad);
      -ms-transform:drehen(90Grad);
          transformieren: drehen (90 Grad);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: drehen(120 Grad);
      -ms-transform:drehen(120Grad);
          transformieren: drehen (120 Grad);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: drehen (150 Grad);
      -ms-transform:drehen(150Grad);
          transformieren: drehen (150 Grad);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: drehen(180 Grad);
      -ms-transform:drehen(180Grad);
          transformieren: drehen (180 Grad);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform:drehen(210grad);
      -ms-transform:drehen(210grad);
          transformieren: drehen (210 Grad);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: drehen(240 Grad);
      -ms-transform:drehen(240grad);
          transformieren: drehen (240 Grad);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: drehen(270 Grad);
      -ms-transform:drehen(270Grad);
          transformieren: drehen (270 Grad);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: drehen (300 Grad);
      -ms-transform:drehen(300 Grad);
          transformieren: drehen (300 Grad); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: drehen(330 Grad);
      -ms-transform:drehen(330grad);
          transformieren: drehen (330 Grad); 
}
.sk-fading-circle .sk-circle2:vorher {
  -Webkit-Animationsverzögerung: -1,1 s;
          Animationsverzögerung: -1,1 s; 
}
.sk-fading-circle .sk-circle3:vorher {
  -Webkit-Animationsverzögerung: -1 s;
          Animationsverzögerung: -1s; 
}
.sk-fading-circle .sk-circle4:vor {
  -Webkit-Animationsverzögerung: -0,9 s;
          Animationsverzögerung: -0,9 s; 
}
.sk-fading-circle .sk-circle5:vorher {
  -Webkit-Animationsverzögerung: -0,8 s;
          Animationsverzögerung: -0,8 s; 
}
.sk-fading-circle .sk-circle6:vor {
  -Webkit-Animationsverzögerung: -0,7 s;
          Animationsverzögerung: -0,7 s; 
}
.sk-fading-circle .sk-circle7:vorher {
  -Webkit-Animationsverzögerung: -0,6 s;
          Animationsverzögerung: -0,6 s; 
}
.sk-fading-circle .sk-circle8:vorher {
  -Webkit-Animationsverzögerung: -0,5 s;
          Animationsverzögerung: -0,5 s; 
}
.sk-fading-circle .sk-circle9:vor {
  -Webkit-Animationsverzögerung: -0,4 s;
          Animationsverzögerung: -0,4 s;
}
.sk-fading-circle .sk-circle10:vorher {
  -Webkit-Animationsverzögerung: -0,3 s;
          Animationsverzögerung: -0,3 s;
}
.sk-fading-circle .sk-circle11:vorher {
  -Webkit-Animationsverzögerung: -0,2 s;
          Animationsverzögerung: -0,2 s;
}
.sk-fading-circle .sk-circle12:vorher {
  -Webkit-Animationsverzögerung: -0,1 s;
          Animationsverzögerung: -0,1 s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0 %, 39 %, 100 % { Deckkraft: 0; }
  40 % { Deckkraft: 1; }
}

@keyframes sk-circleFadeDelay {
  0 %, 39 %, 100 % { Deckkraft: 0; }
  40 % { Deckkraft: 1; } 
}

Analyse: Die Ladeanimation besteht aus 12 einfarbigen Punkten, die um 360 Grad verteilt sind, sich drehen und dabei abwechselnd ihre Transparenz ändern.

HTML

<div Klasse="sk-folding-cube">
  <div Klasse="sk-cube1 sk-cube"></div>
  <div Klasse="sk-cube2 sk-cube"></div>
  <div Klasse="sk-cube4 sk-cube"></div>
  <div Klasse="sk-cube3 sk-cube"></div>
</div>

CSS

.sk-Klappwürfel {
  Rand: 20px automatisch;
  Breite: 40px;
  Höhe: 40px;
  Position: relativ;
  -webkit-transform:rotateZ(45 Grad);
          transformieren: drehenZ(45 Grad);
}

.sk-Klappwürfel .sk-Würfel {
  schweben: links;
  Breite: 50%;
  Höhe: 50%;
  Position: relativ;
  -webkit-transform: Skalierung(1.1);
      -ms-transform:Skala(1.1);
          transformieren: Skalierung(1.1); 
}
.sk-Klappwürfel .sk-cube:vorher {
  Inhalt: '';
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrundfarbe: #333;
  -webkit-animation: sk-foldCubeAngle 2,4 s unendlich linear beides;
          Animation: sk-foldCubeAngle 2,4 s unendlich linear beides;
  -webkit-transform-origin: 100 % 100 %;
      -ms-transform-origin: 100 % 100 %;
          Transform-Ursprung: 100 % 100 %;
}
.sk-Klappwürfel .sk-cube2 {
  -webkit-transform: Skalierung (1.1) Z-Drehung (90 Grad);
          transformieren: Skalieren (1,1) Z-Drehung (90 Grad);
}
.sk-Klappwürfel .sk-cube3 {
  -webkit-transform: Skalierung (1.1) DreheZ (180 Grad);
          transformieren: Skalieren (1,1) Z-Drehung (180 Grad);
}
.sk-Klappwürfel .sk-cube4 {
  -webkit-transform: Skalierung (1.1) DreheZ (270 Grad);
          transformieren: Skalieren (1,1) Z-Drehung (270 Grad);
}
.sk-Klappwürfel .sk-cube2:vorher {
  -Webkit-Animationsverzögerung: 0,3 s;
          Animationsverzögerung: 0,3 s;
}
.sk-Klappwürfel .sk-cube3:vorher {
  -Webkit-Animationsverzögerung: 0,6 s;
          Animationsverzögerung: 0,6 s; 
}
.sk-Klappwürfel .sk-cube4:vorher {
  -Webkit-Animationsverzögerung: 0,9 s;
          Animationsverzögerung: 0,9 s;
}
@-webkit-keyframes sk-foldWürfelWinkel {
  0%, 10% {
    -webkit-transform: Perspektive (140px) RotiereX (-180 Grad);
            transformieren: Perspektive (140px) drehenX(-180 Grad);
    Deckkraft: 0; 
  } 25 %, 75 % {
    -webkit-transform: Perspektive (140px) RotiereX (0 Grad);
            transformieren: Perspektive (140px) drehenX (0 Grad);
    Deckkraft: 1; 
  } 90 %, 100 % {
    -webkit-transform: Perspektive (140px) Y-Drehung (180 Grad);
            transformieren: Perspektive (140px) Y-Drehung (180 Grad);
    Deckkraft: 0; 
  } 
}

@keyframes sk-foldWürfelWinkel {
  0%, 10% {
    -webkit-transform: Perspektive (140px) RotiereX (-180 Grad);
            transformieren: Perspektive (140px) drehenX(-180 Grad);
    Deckkraft: 0; 
  } 25 %, 75 % {
    -webkit-transform: Perspektive (140px) RotiereX (0 Grad);
            transformieren: Perspektive (140px) drehenX (0 Grad);
    Deckkraft: 1; 
  } 90 %, 100 % {
    -webkit-transform: Perspektive (140px) Y-Drehung (180 Grad);
            transformieren: Perspektive (140px) Y-Drehung (180 Grad);
    Deckkraft: 0; 
  }
}

Analyse: Vier gleichseitige Blöcke bilden ein Quadrat, das um 45 Grad gedreht wird. Anschließend wird jeder Block mit einer unterschiedlichen Verzögerungszeit entlang der X-Achse gedreht. Durch die Einstellung perspective soll ein 3D-Effekt erzielt werden.

Fazit: Die Prinzipien der oben genannten Fälle bestehen darin, Animationseffekte durch das Einstellen unterschiedlicher Verzögerungszeiten, das Verschieben und Drehen von Elementen oder Unterelementen auf der X-, Y- und Z-Achse sowie die Skalierung zu erzielen. Mit diesen Referenzen und Ihrer Kreativität können Sie weitere Type-Loading-Effekte erstellen.

Dies ist das Ende dieses Artikels über die Verwendung von CSS zum Erzielen verschiedener Ladeeffekte und den dazugehörigen Analyseprozess. Weitere relevante Inhalte zur Verwendung von CSS zum Erzielen verschiedener Ladeeffekte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)

>>:  Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren

Artikel empfehlen

HTML+CSS-Implementierungscode für abgerundete Rechtecke

Mir war langweilig und plötzlich fiel mir die Impl...

So installieren Sie Oracle_11g mit Docker

Installieren Sie Oracle_11g mit Docker 1. Ziehen ...

Installieren des Betriebssystems Windows Server 2008 auf einer virtuellen Maschine

Dieser Artikel stellt die Installation des Window...

Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte

Inhaltsverzeichnis Objekt.prototype.valueOf() Obj...

Lösung für das Problem, dass nach dem Domänennamen zwei Schrägstriche // erscheinen, wenn nginx für den Domänennamenzugriff konfiguriert ist

Ich habe vor Kurzem meine persönliche Website neu...

Das Installationstutorial zu mysql5.5.28 ist super detailliert!

mysql5.5.28 Installations-Tutorial zu Ihrer Infor...

Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht

Inhaltsverzeichnis 1. Ändern Sie die app.vue-Seit...

Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen

Der Container wurde bereits erstellt. So erfahren...

Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)

iOS 1. URL-Schema Diese Lösung ist grundsätzlich ...

Was ist JavaScript Anti-Shake und Throttling

Inhaltsverzeichnis 1. Funktion Entprellung 1. Was...

Verwenden Sie h1-, h2- und h3-Tags angemessen

Beim Erstellen von Webseiten ist die Verwendung d...

Schritt-für-Schritt-Anleitung zur Installation von VMware Workstation und des Betriebssystems WIN10 zur Verbindung mit dem externen Netzwerk (sehr ausführliches Tutorial)

Laden Sie zuerst die Version 15.1 von VMware Work...

So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker

Installationsschritte 1. Redis installieren Laden...

Detaillierte Erklärung der CSS-Stylesheets und des Formatlayouts

Stilvorlagen CSS (Cascading Style Sheets) wird zu...

Tutorial zur Verwendung des Multitail-Befehls unter Linux

MultiTail ist eine Software zum gleichzeitigen Üb...