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.

<samp> Logische Auszeichnung

CSS - Markierte Checkbox farbig hervorheben

PHP - define() in PHP 7

JavaScript - Text mit einem Link markieren

MySQL - Spalte Gruppieren und zählen

Freiraum
Quetschen Sie nicht so viel Text, Links und Bilder auf eine Seite. Lassen Sie freien Raum. Der Besucher wird es ihnen danken, außerdem erhöht es die Übersichtlichkeit.