Banner 600x160 Zeit
Code Sources Icon Code Sources Icon


Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Aufgabe

Erstelle einen Banner mit dem bereitgestellten Material.

Download: images-zeit.zip

Führe folgende Schritte aus:

  • Lade die ZIP-Datei auf deinen Rechner, entpacke und sichte das Material
  • Fertige eine kurze Skizze DEINER Gestaltungsidee
    (notiere die Bezeichnungen Elemente und Art der Animation)
  • Erstelle ein Div-Element "#banner" 600 x 160 Pixel (absolute Positionierung)
  • Erstelle den HTML- und CSS-Code für alle Elemente (Bilder, Texte) noch ohne Animation
    (Setze alle Elemente auf die gewünschte (End)-Position, mit den CSS-Stilen)
  • Füge den CSS-Regeln die Animation hinzu Bsp.:
    animation: gotext 20s linear infinite;
    animation: {Bezeichner... } {Zeit ... }s {Art} {Wiederholungen};
  • Erstelle die @keyframe-Regel für die animierten Objekte Bsp.:
    @keyframes gotext {
    30% {opacity: 0;}
    100% {opacity: 1;}
    }
    @keyframes Bezeichner... {
    start { ... }
    end { ... }
    }
  • Prüfe die Animation im Browser > Element untersuchen > Animation (Firefox)
DB-Table: animation-banner-zeit