Link Animation in Squarespace
Mit ein bisschen CSS kannst du eine coole Animation erzeugen, wenn der Benutzer mit der Maus über einen Link auf deiner Website zeigt. Folgender Code bewirkt, dass sich der Link nach rechts bewegt, sobald die Maus auf ihn bewegt wird:
p a {
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}
p a:hover {
margin-left: 20px;
-webkit-transition: ease-in-out 0.5s !important;
-moz-transition: ease-in-out 0.5s !important;
-ms-transition: ease-in-out 0.5s !important;
-o-transition: ease-in-out 0.5s !important;
transition: ease-in-out 0.5s !important;
}Die Bewegung nach Rechts wird über das Key-Word margin-left herbeigeführt. Du kannst durch die Zuweisung (in diesem Fall 20px) die Stärke der Bewegung anpassen. Im Grunde machen wir nichts anderes, als dem Link von der linken Seite seines Startpunktes, um 20px nach rechts zu bewegen. Indem du den Wert 0.5s veränderst, kannst du die Geschwindigkeit der Animation verändern.
