So verwenden Sie die Hover-Animation im Webdesign
Farbe beim Schweben
Das Setzen der Elementfarbe auf Hover hilft dabei, die Aufmerksamkeit der Besucher auf ein Element zu lenken und gibt einen Eindruck und ein Konzept der gewünschten Idee über seine Bedeutung. Sie können die Farbe des Elements beim Hover ändern. Wählen Sie dazu ein Element aus und gehen Sie im Eigenschaftenfenster zum Abschnitt Animation ein, klicken Sie auf den Link Hover und dann auf das Kontrollkästchen Hover. Ändern Sie die Farbe, die beim Hover angewendet werden soll.
Grenze beim Schweben
Der Element Border 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 Elemente wie Symbol, Bild, Form, Gruppe, Raster usw. ändern. Aktivieren Sie im Abschnitt Hover des Eigenschaftenfensters das Kontrollkästchen Hover. Ändern Sie den anzuzeigenden Rahmen, während Sie über ein Element schweben.
Radius beim Schweben
Für Bilder und Formen, Gruppen und Rasterzellen können Sie den Radius beim Hover ändern. Elemente werden mit dieser Eigenschaft attraktiv, regen zu Aktionen an (Jetzt kaufen, Schaltflächen für mehr lesen usw.) und machen Ihr Design einzigartig. Aktivieren Sie im Hover-Bereich des Eigenschaftenfensters den Hover-Modus. Ziehen Sie den Radius-Schieberegler, um seinen Wert beim Hover festzulegen.
Schatten beim Schweben
Sie können die Shadow-Eigenschaft beim Hover für Texte und andere Elemente ändern. Um den Schatten beim Hover festzulegen, fügen Sie ein Element hinzu oder wählen Sie es aus. Klicken Sie als Nächstes auf den Hover-Link des Eigenschaftenfensters, aktivieren Sie das Kontrollkästchen Hover und ändern Sie den Schatten, der auf 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 hinzuzufügen. Klicken Sie im Eigenschaftenfenster auf den Hover-Link und aktivieren Sie das Kontrollkästchen Hover. Legen Sie die Transparenz fest, die beim Hover angewendet werden soll. Klicken Sie irgendwo im Block, um die Auswahl des Elements aufzuheben. Bewegen Sie den Mauszeiger über das Element, um die Transparenzänderung zu testen.
Weiter mit der Maus bewegen
Die auf modernen Websites verwendeten Hover-Animationseffekte sind ausgefeilter geworden. Eines der Effektbeispiele ist der 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 es aus und gehen Sie zum Eigenschaftsfenster. Klicken Sie auf den Hover-Link und aktivieren Sie dann das Kontrollkästchen Hover. Legen Sie die Werte für die Eigenschaft X, Y verschieben fest.
Drehung beim Schweben
Die Rotation beim Hover 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 es aus und gehen Sie zum Eigenschaftenfenster. Gehen Sie zu und klicken Sie auf den Hover-Link im Abschnitt Animation an, und aktivieren Sie dann das Kontrollkästchen Hover. Verwenden Sie den Schieberegler, um den Rotationswinkel einzustellen oder geben Sie den Wert in das Eingabefeld ein. Die unterstützten Werte für den Rotationswinkel reichen von 0 bis 359.
Beim Hover skalieren
Die Skalierung kann wie die natürlichste Reaktion Ihres Cursors aussehen. Daher kann es sehr beliebt sein. Sie können das Scale On Hover ganz einfach zu Ihrer Website hinzufügen. Fügen Sie dazu ein Element hinzu oder wählen Sie es aus und gehen Sie dann zum Eigenschaftsfenster. Klicken Sie auf den Hover-Link des Abschnitts Animation an und aktivieren Sie das Kontrollkästchen Hover. Scrollen Sie nach unten zu den Eigenschaften Skalieren, Drehen und Verschieben. Die tatsächliche Größe beträgt 100.
Schwebedauer
Sie können die Hover-Animation verwalten, indem Sie ihre Dauer festlegen. Legen Sie die Dauer für die Animation beim Hover fest, fügen Sie ein Element hinzu oder wählen Sie es aus und gehen Sie zum Eigenschaftenfenster. Wählen Sie den Hover-Link des Abschnitts Animation auf und aktivieren Sie das Kontrollkästchen Hover. Die unterstützten Werte für den Slider reichen von 10 bis 200, und Sie können bei Bedarf eine größere Zahl in dieses Feld eingeben.
Hintergrundfarbe zu Farbverlauf beim Hover
Wenn Sie die Hover-Animation zu einer Form mit Hintergrund hinzufügen, möchten Sie möglicherweise die einfarbige 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 an -> 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 auf Hover
Sie können auch die Füllung in Bilder ändern und sogar ein Hintergrundbild während des Schwebens in ein anderes ändern, 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 Eigenschaftsfensters und klicken Sie auf Hover. Aktivieren Sie den Hover-Effekt und wählen Sie das Bild als Hintergrundtyp. Wählen Sie das Hover-Bild. Prüfen.