CSS - Diashow mit Keyframes


<style>

div#meinDiv {
 
width600px;
 
height400px;
 
box-shadow0px 0px 7px 6px #bbbbbb;
 
borderSolid 1px #909090;
 
background-imageurl("10.jpg");
 
background-sizecover;
 
animationanimationName 20s 2s infinite;
}

@
keyframes animationName {
 
10% {
  
background-imageurl("1.jpg");
 }
 
20% {
  
background-imageurl("2.jpg");
 }
 
30% {
  
background-imageurl("3.jpg");
 }
 
40% {
  
background-imageurl("4.jpg");
 }
 
50% {
  
background-imageurl("5.jpg");
 }
 
60% {
  
background-imageurl("6.jpg");
 }
 
70% {
  
background-imageurl("7.jpg");
 }
 
80% {
  
background-imageurl("8.jpg");
 }
 
90% {
  
background-imageurl("9.jpg");
 }
 
100% {
  
background-imageurl("10.jpg");
 }
}


/* Für kleine Geräte anpassen */
@media screen and (max-width48rem) {
div#meinDiv {
 
width370px;
 
height250px;
 }
}
</
style>

<
div id="meinDiv"></div>

Bausteine  Alle Anzeigen

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

<cite> Zitat

CSS - Display-Flex mit Tabellen

PHP - Zahlen zweistellig ausgeben

JavaScript - Zahl runden

MySQL - Spalte auf UNIQUE setzen