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.

<form> Formular

CSS - Fehleingaben in Formularen farbig hervorheben

PHP - Daten (Array) mit Komma separieren und Leerzeichen löschen

JavaScript - Leerzeichen am Anfang und Ende einer Zeichenkette entfernen

MySQL - Suchen unter Berücksichtigung von Groß- und Kleinschreibung