KeyFrames CSS

Beispiel für CSS KeyFrames

KeyFrames CSS Beispiel

Dieses Beispiel habe ich nach der Seite von Werner-Zenk.de erstellt. Geht mit der Maus über das Bullauge, um diese Animation zu sehen. Tippt am mobilen Gerät in das Bullauge.

Die CSS

Bitte kopiert die Bilder (hier 'island.jpg' und 'bullauge.png') in das angegebene Verzeichnis auf Euren Server und setzt eine absolute URL. Da Mobirise diese Bilder nicht kennt, würde es bei einer relativen Pfadangabe zu einem Fehler beim Publizieren kommen.

Nur zur Info, ich habe hier 2 unterschiedliche Größen, abhängig vom Gerät, mit einer @media Anweisung eingetragen - am PC ist das Bullauge ca. 500px groß. Weiterhin habe ich hier an allen Geräten die Grafik zentriert. Guckt hierfür mit der rechten Maustaste in den Quelltext meiner Seite, um meine vollständige <style> Anweisung zu sehen. Macht den Hintergrund 2px kleiner als den Vordergrund, da es sonst am iPhone flackert.

> Menü > Seiten > Seiteneinstellungen > "Inside <head> code:"

<style>
#hintergrund {
width: 298px;
height: 298px;
background: url("http://www.mobirise-tutorials.com/PortfolioM4/assets/images/sea.jpg");
background-size: 100% 100%;
background-position: center left;
transition: all 2.5s;
animation: bewegeHintergrund 10s ease 1s infinite alternate;
}

div#vordergrund {
width: 300px;
height: 300px;
position: Absolute;
cursor: all-scroll;
background-image: url("http://www.mobirise-tutorials.com/PortfolioM4/assets/images/bullauge.png");
}

div#vordergrund:hover ~ #hintergrund {
background-size: 270% 270%;
}

@keyframes bewegeHintergrund {
100% {
background-position: center right;
}
}
</style>

Die Anzeige im DIV

Diese DIVs kopiert Ihr in den Bereich des Code Editors, wo die Animation angezeigt werden soll.

<div>
<div id="vordergrund"></div>
<div id="hintergrund"></div>
</div>

Mobirise Tutorials

Dieser Footer wurde mit dem "global" Attribut versehen
und muss somit nur einmalig in diesem Projekt geändert werden.
Das funktioniert nur bei der Menüleiste und beim Footer.