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.

<aside> Nebeninhalt

CSS - Externe URL des Hyperlinks sichtbar machen

PHP - Alle Dateien im akt. Verzeichnis und den Unterverz. anzeigen

JavaScript - Eine Animation ab einer bestimmten Scroll-Position starten

MySQL - Datensätze über Checkbox-Auswahl suchen

Homepage Testen
Wenn Ihre Seite fertig sind und ins Internet hochgeladen wurden, gilt es: Testen, testen, testen. Viele Fehler kann man Offline finden, manche aber nur Online (zum Beispiel vergessene Dateien, falsche Links). Von großem Wert ist auch ein Test seitens einer Person, welcher die Seite unbekannt ist.
Meist fallen Schönheitsfehler und Hindernisse auf, die man als Webmaster nicht mehr sieht. Hierbei hilft es, der Testperson Aufgaben zu stellen, zum Beispiel, eine bestimmte Information zu finden oder ein bestimmtes Produkt zu bestellen.