Tutorial 14
Drehende Grafiken (transition)Fahre mit der Maus über die Grafiken :-) Im IE6-IE9 ist keine Animation zu sehen!
Schritt 1 : Der HTML-Code
Dem Bild geben wir eine Klasse. Zum Beispiel den Klassennamen "drehen"
HTML-Code für eine verlinkte Grafik, einfügen im Seiteninhalt (oder rechte Box)
| Der HTML-Code: |
<a href="LINK"><img class="drehen" src="Grafikadresse" alt="" border="0" /></a> |
Schritt 2 : Der CSS-Code
Die Klasse "drehen" bekommt nun die CSS-Eigenschaften für die Animation.
| Der CSS-Code: |
.drehen {
-webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; transition: transform 0.5s ease-out; } .drehen:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } |
Du hast das Baukasten-Design "CSS" ? Code einfügen im Feld "css ohne style tags".
Alle anderen Designs (Iceblue, Red, Butterly, Colorful u.s.w.)
Den CSS-Code einfügen im Feld "Text ÜBER Design", vor dem --></style>
Wenn Du im Feld "Text über Design" noch keinen CSS Code stehen hast, muss der style-tag dazu.
Schreibe dann vor dem Code : <style type="text/css"><!-- Und nach dem Code : --></style>
Seite drucken
