CSS - Verschieben von Hintergründen
<style>
.stage {
height: 45vh;
overflow: hidden;
position: relative;
width: 45vw;
margin: Auto;
margin-bottom: 50px;
border: Solid 1px #000000;
box-shadow: 0px 0px 10px 3px #999999;
}
.actor {
animation: kenburns 45s linear infinite;
background-size: cover;
background-position: 50% 50%;
height: 45vh;
inset: 0;
opacity: 0;
position: absolute;
scale: 1.5;
width: 45vw;
}
.actor:nth-child(1) {
background-image: url("bild2.jpg");
}
.actor:nth-child(2) {
animation-delay: 10s;
background-image: url("bild1.jpg");
}
.actor:nth-child(3) {
animation-delay: 20s;
background-image: url("bild3.jpg");
}
.actor:nth-child(4) {
animation-delay: 30s;
background-image: url("bild5.jpg");
}
.actor:nth-child(5) {
animation-delay: 40s;
background-image: url("bild7.jpg");
}
@keyframes kenburns {
25% {
opacity: 1;
scale: 1;
}
50% {
opacity: .8;
}
60% {
opacity: 0;
}
}
</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
PHP - Lange Wörter mit Leerzeichen teilen
JavaScript - Text in Großbuchstaben oder Kleinbuchstaben umwandeln