schwebende Bilder
Mit CSS3-Kayframes lassen sich Animationen erstellen.
Hier ein Beispiel Bilder über dem Bildschirm schweben zu lassen.
mobile_script einfügen:
Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok
<style>
div
.schweben {margin:0 10px 25px 0;}
.hovering {
-webkit-animation-name: hovering;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: hovering;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
animation-name: hovering;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes hovering {
from {-webkit-transform:translate(0, 0px);}
50% {-webkit-transform:translate(0, -25px);}
to {-webkit-transform: translate(0, -0px);}
}
@-moz-keyframes hovering {
from {-moz-transform:translate(0, 0px);}
50% {-moz-transform:translate(0, -25px);}
to {-moz-transform: translate(0, -0px);}
}
@keyframes hovering {
from {transform:translate(0, 0px);}
50% {transform:translate(0, -25px);}
to {transform: translate(0, -0px);}
}
</style>
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok
<div style="position: absolute; top:100px; margin-left:
-300px; left:50%; z-index:10;" class="schweben hovering"
><a href="http://community.zeta-producer.com/"
target="_self"><img title="Schiff" alt="" border="0"
src="http://zella.de/code/bilder/schiff.png"></a></div>
