Mit CSS3 implementierte Text-Popup-Effekte

<div>123WORDPRESS.COM</div> 
<div> 
  <span>https://www.jb51.net</span>
</div>


<p>eine CSS3-Animationsdemo</p>

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

Körper {
  Textausrichtung: zentriert;
  Hintergrund: linearer Farbverlauf (141 Grad, #ccc 25 %, #eee 40 %, #ddd 55 %);
  Farbe: Nr. 555;
  Schriftfamilie: „Roboto“;
  Schriftstärke: 300;
  Schriftgröße: 32px;
  Polsterung oben: 40vh;
  Höhe: 100vh;
  Überlauf: versteckt;
  -webkit-backface-visibility: versteckt;
  -WebKit-Perspektive: 1000;
  -webkit-transform: übersetzen3d(0,0,0);
}

div {
  Anzeige: Inline-Block;
  Überlauf: versteckt;
  Leerzeichen:nowrap;
}

div:first-of-type { /* Zur Leistungssteigerung 
                       ID/Klasse hätte verwendet werden sollen. 
                       Für eine kleine Demo 
                       im Moment ist es einigermaßen ok */
  Animation: Showup 7 s unendlich;
}

div:letzter-vom-Typ {
  Breite: 0px;
  Animation: 7 Sekunden unendlich enthüllen;
}

div:letzter-vom-Typ span {
  Rand links: -355px;
  Animation: Slidein 7s unendlich;
}

@keyframes anzeigen {
    0 % {Deckkraft:0;}
    20 % {Deckkraft:1;}
    80 % {Deckkraft:1;}
    100 % {Deckkraft:0;}
}

@keyframes Schieberegler {
    0 % { Rand links: -800px; }
    20 % { Rand links: -800px; }
    35 % { Rand links: 0px; }
    100 % { Rand links: 0px; }
}

@keyframes enthüllen {
    0 % {Deckkraft: 0; Breite: 0px;}
    20 % {Deckkraft: 1; Breite: 0px;}
    30 % {width:355px;}
    80 % {Deckkraft:1;}
    100 % {Deckkraft: 0; Breite: 355 Pixel;}
}


P {
  Schriftgröße: 12px;
  Farbe: Nr. 999;
  Rand oben: 200px;
}