So verwenden Sie die Hover-Animation im Webdesign
Farbe beim Schweben
Das Festlegen der Elementfarbe beim Schweben hilft, die Aufmerksamkeit der Besucher auf ein Element zu lenken, und vermittelt einen Eindruck und ein Konzept der gewünschten Vorstellung von seiner Bedeutung. Sie können die Farbe des Elements beim Hover ändern. Wählen Sie dazu ein Element aus und gehen Sie im Eigenschaftenbereich zum Abschnitt Animation ein, klicken Sie auf den Link Hover und dann auf das Kontrollkästchen Hover. Ändern Sie die beim Hover anzuwendende Farbe.
Grenze beim Schweben
Die Element-Grenze ist auch wichtig, um die Interaktion von Elements zu verbessern und die Aufmerksamkeit der Besucher auf sich zu ziehen. Sie können den Hover-Rahmen für solche Elemente wie Symbol, Bild, Form, Gruppe, Raster usw. ändern. Aktivieren Sie im Hover-Bereich des Eigenschaftsfensters das Hover-Kontrollkästchen. Ändern Sie den Rand, der angezeigt werden soll, während Sie über ein Element schweben.
Radius beim Schweben
Für Bilder und Formen, Gruppen und Rasterzellen können Sie den Radius beim Schweben ändern. Elemente werden mit dieser Eigenschaft attraktiv, fordern zum Handeln auf (Schaltflächen „Jetzt kaufen“, „Weiterlesen“ usw.) und machen Ihr Design einzigartig. Aktivieren Sie im Hover-Bereich des Eigenschaftenbereichs den Hover-Modus. Ziehen Sie den Radius-Schieberegler, um seinen Wert beim Schweben festzulegen.
Schatten beim Schweben
Sie können die Shadow-Eigenschaft beim Hover für Texte und andere Elemente ändern. Um den Schatten beim Schweben festzulegen, fügen Sie ein Element hinzu oder wählen Sie ein Element aus. Klicken Sie als Nächstes auf den Hover-Link des Eigenschaftsfensters, aktivieren Sie das Hover-Kontrollkästchen und ändern Sie den Schatten, der beim Hover angewendet werden soll. Sie können mit einer der Schattenvoreinstellungen beginnen und diese bei Bedarf anpassen.
Transparenz beim Schweben
Sie können die Elementtransparenz beim Hover ändern, um dem Website-Design Interaktion und Attraktivität zu verleihen. Klicken Sie im Eigenschaftenbereich auf den Link Hover und aktivieren Sie das Kontrollkästchen Hover. Legen Sie die beim Hover anzuwendende Transparenz fest. Klicken Sie irgendwo in den Block, um die Auswahl des Elements aufzuheben. Bewegen Sie den Mauszeiger über das Element, um die Transparenzänderung zu testen.
Bewegen Sie den Mauszeiger
Die Hover-Animationseffekte, die auf modernen Websites verwendet werden, sind ausgefeilter geworden. Eines der Effektbeispiele ist das Element Move on Hover. Sie können die Bewegung eines Elements beim Hover hinzufügen. Fügen Sie ein Element hinzu oder wählen Sie ein Element aus und gehen Sie zum Eigenschaftsfenster. Klicken Sie auf den Hover-Link und aktivieren Sie dann das Hover-Kontrollkästchen. Legen Sie die Werte für die Eigenschaft Move X, Y fest.
Beim Schweben drehen
Die Drehung beim Schweben ist der nächste wichtige und komplexe Effekt. Um ein Element beim Hover zu drehen, fügen Sie ein Element hinzu oder wählen Sie ein Element aus und gehen Sie zum Eigenschaftsfenster. Wechseln Sie zu und klicken Sie auf den Hover-Link im Abschnitt „Animation ein“ und aktivieren Sie dann das Hover-Kontrollkästchen. Verwenden Sie den Schieberegler, um den Drehwinkel einzustellen, oder geben Sie den Wert in das Eingabefeld ein. Die unterstützten Werte für den Drehwinkel reichen von 0 bis 359.
Beim Schweben skalieren
Skalierung kann wie die natürlichste Reaktion auf Ihren Cursor aussehen. Daher kann es sehr beliebt sein. Sie können den Scale On Hover ganz einfach zu Ihrer Website hinzufügen. Fügen Sie dazu ein Element hinzu oder wählen Sie ein Element aus und gehen Sie dann zum Eigenschaftsfenster. Klicken Sie auf den Link „Hover“ im Bereich „Animation On“ und aktivieren Sie das Kontrollkästchen „Hover“. Scrollen Sie nach unten zu den Eigenschaften „Skalieren“, „Drehen“ und „Verschieben“. Die tatsächliche Größe ist gleich 100.
Hover-Dauer
Sie können die Hover-Animation verwalten, indem Sie ihre Dauer festlegen. Legen Sie die Dauer für die Animation beim Hover-Hinzufügen fest oder wählen Sie ein Element aus und gehen Sie zum Eigenschaftsfenster. Wählen Sie den Hover-Link des Abschnitts „Animation ein“ und aktivieren Sie das Kontrollkästchen „Hover“. Die unterstützten Werte für den Schieberegler reichen von 10 bis 200, und Sie können bei Bedarf eine größere Zahl in dieses Feld eingeben.
Hintergrundfarbe zum Farbverlauf beim Hover
Wenn Sie die Hover-Animation zu einer Form mit Hintergrund hinzufügen, möchten Sie vielleicht die solide Füllung in etwas Attraktives ändern, z. B. einen Farbverlauf. Wählen Sie dazu eine Form aus und gehen Sie zum Hover-Link des Eigenschaftsfensters. Klicken Sie auf den Link „Animation On – Hover“ und aktivieren Sie das Kontrollkästchen „Hover“. Wählen Sie den Verlaufstyp für den Hintergrund und stellen Sie den Verlauf ein.
Hintergrundbild zu Bild beim Hover
Sie können auch die Füllung in Bilder ändern und sogar ein Hintergrundbild in ein anderes ändern, während Sie darüber schweben, was Ihre Besucher sehr unterhalten kann. Wählen Sie eine Form aus und fügen Sie ein Bild für den Hintergrund hinzu. Gehen Sie zum Abschnitt „Animation an“ des Eigenschaftenfensters und klicken Sie auf „Hover“. Aktivieren Sie den Hover-Effekt und wählen Sie das Bild als Hintergrundtyp aus. Wählen Sie das Hover-Bild aus. Prüfen.