So implementieren Sie die King of Glory-Personal-Ladeseite mit CSS3

Hintergrund: radialer Farbverlauf (Mitte, Formgröße, Startfarbe, …, letzte Farbe);

<Stil>
  .König{
    Position: relativ;
    Höhe: 25rem;
    Breite: 100 %;
    Hintergrund: 
      radialer Farbverlauf (Kreis, #ccc, #161d4f 85 %);
  }
</Stil>
<div Klasse="König"></div> 

Hintergrund: linearer Farbverlauf (Richtung/Winkel, Farbstopp1, Farbstopp2, …);

<Stil>
...
.player-layout{
  Position: relativ;
  Höhe: 8rem;
  Breite: 100 %;
  Hintergrund: 
    linearer Farbverlauf (nach rechts, #212f46, #212f4670, #212f46);
  oben: 50 %;
  transformieren: übersetzen(0,-50%);
  Z-Index: 10;
}
</Stil>
<div Klasse="König">
  <div Klasse="Player-Layout"></div>
</div>

<Stil>
...
.Center{
  Position: absolut;
  Höhe: 8rem;
  Breite: 8rem;
  oben: 50 %;
  links: 50%;
  verwandeln: 
    verschieben(-50 %, -50 %) drehen(45 Grad);
  Hintergrund: 
    linearer Farbverlauf (90 Grad, #212f46, #5b99ff);
  Rand: .3rem durchgezogen #55a9ef;
  Kastenschatten: 0px 0px .8rem #88c0f0;
  Polsterung: .2rem;
}
.center img{
  Breite: 100 %;
  Höhe: 100%;
}
</Stil>
<div Klasse="König">
  <div Klasse="Spieler-Layout">
    <div Klasse="center"><img src="../images/123123.jpg"></div>
  </div>
</div> 

<Stil>
...
...
.Gruppe{
  Position: relativ;
  Breite: berechnet ((100 % – 13rem)/2);
  oben: 50 %;
  transformieren: übersetzen(0, -50%);
}
.Gruppe1{
  Textausrichtung: rechts;
  schweben: links;
}
.Gruppe2{
  Textausrichtung: links;
  schweben: rechts;
}
.Spieler{
  Breite: 4rem;
  Höhe: 4rem;
  Anzeige: Inline-Block;
  Hintergrund: URL ('../images/123123.jpg');
  Hintergrundgröße: Abdeckung;
  Rand: .3rem durchgezogen #55a9ef;
  Kastenschatten: 0px 0px .8rem #88c0f0;
}  
</Stil>
...
<div Klasse="Spieler-Layout">
  <div Klasse="Gruppe Gruppe1">
    <div class="player1 player"></div>
    <div class="player2 player"></div>
    <div class="player3-Spieler"></div>
    <div class="player4 player"></div>
    <div class="player5 Spieler"></div>
  </div>
  <div Klasse="Gruppe Gruppe2">
    <div class="player6 Spieler"></div>
    <div class="player7 player"></div>
    <div class="player8 Spieler"></div>
    <div class="player9 Spieler"></div>
    <div class="player10 player"></div>
  </div>
  <div Klasse="center"><img src="../images/123123.jpg"></div>
</div>
...

.Spieler{
  Position: relativ;
  ...
  ...
  Farbe: #fff;
}
.Spieler::vorher,
.Spieler::nach {
  Position: absolut;
  Inhalt: '';
  oben: 0;
  unten: 0;
  links: 0;
  rechts: 0;
  Marge: -8%;
  Box-Shadow: Einschub 0 0 0 .3rem;
  Animation: ClipMe 6s linear unendlich;
}
.spieler::vor {
  Animationsverzögerung: -3s;
}
@keyframes clipMe {
  0%,
  100 % {
    Clip: Rechteck (0, 4,8rem, 4,8rem, 4,3rem);
  }
  25 % {
    Clip: Rechteck (0px, 4,8rem, 0,3rem, 0);
  }
  50 % {
    Clip: Rechteck (0, .3rem, 4.8rem, 0);
  }
  75 % {
    Clip: Rechteck (4,3rem, 4,8rem, 4,8rem, 0rem);
  }
}

.group::vorher, .group::nachher{
  Position: absolut;
  Inhalt: '';
  Hintergrund: linearer Farbverlauf (nach rechts, #212f4602, #7499d7, #212f4602);
  Höhe: .3rem;
  Breite: 10rem;
}
.group::before{
  oben: -1,5rem;
}
.group::nach{
  unten: -1,5rem;
}
.group1::vor{
  rechts: 0;
}
.group1::nach{
  rechts: 5rem;
}
.group2::nach{
  links: 5rem;
} 

<div Klasse="König">
  <div Klasse="Spieler-Layout">
    ...
  </div>
  <div Klasse="Matrix"></div>
</div>
<Stil>
.Matrix{
  Position: absolut;
  Höhe: 17,6rem;
  Breite: 17,6rem;
  Hintergrund: #008cf4;
  oben: 50 %;
  links: 50%;
  verwandeln: 
    verschieben(-50 %, -50 %) drehen(45 Grad);
  Z-Index: 1;
}
</Stil>

<Stil>
...
.Grenze{
  Position: absolut;
  Höhe: 17,6rem;
  Breite: 17,6rem;
  Textausrichtung: zentriert;
}
.border::vorher,.border::nachher{
  Position: absolut;
  Anzeige: Block;
  Breite: 100 %;
  Höhe: 2,5rem;
  Farbe: #fff;
  Hintergrund: 
    linearer Farbverlauf (nach oben, #212f4602, #7499d7);
}
.border1::vor{
  Inhalt: ‚Web-Frontend-Abzugsgruppe 784783012‘;
}
.border1::nach{
  unten: 0;
  Inhalt: ,Komm mit mir‘;
  transformieren: drehen (180 Grad);
}
.border2{
  transformieren: drehen (90 Grad);
}
.border2::vor{
  Inhalt: „Front-End lernen“;
}
.border2::nach{
  unten: 0;
  Inhalt: ,,Lass dich angeben';
  transformieren: drehen (180 Grad);
}
</Stil>
...
<div Klasse="Matrix">
  <div Klasse="Rand Rand1"></div>
  <div Klasse="border border2"></div>
</div>

.Matrix{
  Position: absolut;
  /* Breite und Höhe ändern */
  Höhe: 16,7rem;
  Breite: 16,7rem;
  oben: 50 %;
  links: 50%;
  transformieren: verschieben (-50 %, -50 %) drehen (45 Grad);
  Z-Index: 1;
  /* Ränder und Abstände hinzufügen */
  Rand: .1rem durchgezogen #7499d7;
  Polsterung: .4rem;
}
.Grenze{
  Position: absolut;
  /* Breite und Höhe ändern */
  Höhe: 16,7rem;
  Breite: 16,7rem;
  Textausrichtung: zentriert;
} 

.border::vorher,.border::nachher{
  ...
  Animation: Text – 1,5 s linear unendlich;
}
@keyframes text-an {
  0 %{
    Textschatten: 0 0 0 #ffffff;
  }
  100 % {
    Textschatten: 0 -6rem .4rem #ffffff10;
  }
}

<div Klasse="König">
  ...
  <div class="button">Bestätigen</div>
</div>
<Stil>
.Taste{
  Position: relativ;
  Hintergrund: #3e3a31;
  Breite: 6,5rem;
  Höhe: 2rem;
  Zeilenhöhe: 2rem;
  Farbe: #fff;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  Z-Index: 11;
  Textausrichtung: zentriert;
  Cursor: Zeiger;
}
.button::vorher,.button::nachher{
  Position: absolut;
  Inhalt: '';
  Anzeige: Inline-Block;
  Breite: 0; 
  Höhe: 0;
  Rahmenbreite: 1,43rem;
  Rahmenstil: durchgezogen;
  Rahmenfarbe:
    #3e3a31 
    transparent 
    transparent  
    transparent;
}
.button::vor{
  transformieren: drehen (-135 Grad);
  links: -1,40rem;
  oben: -1,42rem;
}
.button::nach{
  transformieren: drehen (135 Grad);
  rechts: -1,43rem;
  oben: -1,43rem;
}
</Stil>