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.

<select> Auswahlliste (Formularelement)

CSS - Pink-Cube-Animation

PHP - Abfrage einer Datenbank (über PDO) und Ausgabe der Daten

JavaScript - Suchen und Ersetzen

MySQL - Das Alter von Personen ermitteln

Seriöses Design
Durch das Design entscheidet der Besucher über die Seriosität und Qualität der Seite. Mit einem guten Design haben Sie schnell Pluspunkte bei den Besuchern erzielt, ebenso können Sie damit Ihre Besucher verärgern, und sie somit zu keinem weiteren Besuch bewegen können.