CSS - Verschieben von Hintergründen


<style>

.
stage {
  
height45vh;
  
overflowhidden;
  
positionrelative;
  
width45vw;
  
marginAuto;
  
margin-bottom50px;
  
borderSolid 1px #000000;
  
box-shadow0px 0px 10px 3px #999999;
}

.
actor {
  
animationkenburns 45s linear infinite;
  
background-sizecover;
  
background-position5050%;
  
height45vh;
  
inset0;
  
opacity0;
  
positionabsolute;
  
scale1.5;
  
width45vw;
}

.
actor:nth-child(1) {
  
background-imageurl("bild2.jpg");
}
.
actor:nth-child(2) {
  
animation-delay10s;
  
background-imageurl("bild1.jpg");
}
.
actor:nth-child(3) {
  
animation-delay20s;
  
background-imageurl("bild3.jpg");
}
.
actor:nth-child(4) {
  
animation-delay30s;
  
background-imageurl("bild5.jpg");
}
.
actor:nth-child(5) {
  
animation-delay40s;
  
background-imageurl("bild7.jpg");
}

@
keyframes kenburns {
  
25% {
    
opacity1;
    
scale1;
  }

  
50% {
    
opacity.8;
  }

  
60% {
    
opacity0;
  }
}
</
style>

<
div class="stage">
  <
div class="actor"></div>
  <
div class="actor"></div>
  <
div class="actor"></div>
  <
div class="actor"></div>
  <
div class="actor"></div>
</
div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<summary> Überschrift

CSS - Bild mit Impuls

PHP - Lange Wörter mit Leerzeichen teilen

JavaScript - Text in Großbuchstaben oder Kleinbuchstaben umwandeln

MySQL - Datensätze (Gehalt) zwischen 2000 und 3000 anzeigen

Langsame Seiten
Wenn Ihre Seite langsam lädt, sorgen Sie dafür, dass der Besucher den Lade-Vorgang vor Augen hat. Das heißt: Besucher, die sehen, wie sich langsam eine Seite aufbaut, sind geduldiger als Besucher, die erst nach 60 Sekunden eine komplett aufgebaute Seite sehen, auch wenn die absolute Ladezeit die gleiche ist.