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>

nach oben

support
Dutch English French German