1. Zuhause
  2. Eigenschaften
  3. Webseitenelemente
  4. Box-Element
  5. Hover-Animation Auf Box

So verwenden Sie die Animation on Box im Webdesign

Mit Gruppen können Sie gruppierte Elemente animieren. Dabei können Sie die Gruppe selbst animieren. Beispielsweise können Sie den Hintergrund und den Rahmen für eine Gruppe ändern. Für die inneren Elemente können Sie, während Sie über eine Gruppe schweben, andere Animationseffekte wie Skalieren, Drehen, Verschieben usw. anwenden, um eine erstaunliche Interaktion zu schaffen, um Ihre Besucher dazu zu bringen, länger auf der Website zu bleiben.
Mehr erfahren

Nach Funktionskategorien durchsuchen

Webseitenelemente
Unterstützte Systeme
Visueller Seiteneditor
Design-Elemente
Medienbibliotheken
Elementeigenschaften
Responsiv
Animationseffekte
Themen Einstellungen
Kontakt Formular
Kopfzeile Fußzeile
Blog
E-Commerce
SEO
Benutzerdefinierter Code
Anwendungsfunktionen
Site- und Seiteneigenschaften
WordPress-Widgets

Alles, was Sie brauchen, um Ihre kostenlose Website zu erstellen

Verwenden Sie unseren Website Builder, um Websites ohne Codierung zu entwerfen und zu erstellen. Ziehen Sie alles, was Sie möchten, per Drag & Drop an einen beliebigen Ort. Der Website Creator passt Ihre Website automatisch für Mobilgeräte an, um sie responsive zu machen. Wählen Sie aus mehr als 15,000 anpassbaren Website-Vorlagen.

Für Windows herunterladen Für Mac herunterladen

Verwandte Funktionen

Box in Grid-Repeater umwandeln

Wenn Sie mehrere Spalten der ähnlich aussehenden Elemente benötigen, können Sie eine Gruppe in den Grid Repeater umwandeln. Es ermöglicht Ihnen, die gruppierten Elemente in Spalten ähnlich zu stilisieren, dh wenn Sie ein Element bearbeiten, das in einem Element eines Grid Repeaters platziert ist, erhalten alle anderen Elemente, die in anderen Elementen platziert sind, automatisch dasselbe Styling.
Hintergrundtypen von Box

Einer der Hauptvorteile des Gruppenelements besteht darin, dass Sie es als einzelnes Element stilisieren können. Es hat Grenzen, und um den isolierten Bereich zu füllen, können Sie den Hintergrund festlegen, der eine solide Füllung, einen Farbverlauf, ein Bild und ein Video sein kann, oder Sie können keinen Hintergrund haben, was zum Beispiel anwendbar ist, wenn Sie den Rahmen anwenden.
Ziehen Sie Box-Elemente zusammen

Im Editor können Sie mehrere Elemente auswählen und gemeinsam verschieben. Es wird jedoch empfohlen, Elemente als integrierten Bestandteil des Webdesigns zu gruppieren, wodurch sie und ihre Positionierung erhalten bleiben. Sie können die Gruppe und ihre Elemente zusammen ziehen und ablegen, was praktisch ist und Zeit spart.
Hintergrund-Hover-Animation des Box-Bildes

Ähnlich wie bei Rasterzellen können Sie den Hover-Animationseffekt auf den Bildhintergrund einer Gruppe anwenden. Sie können mehrere voreingestellte Voreinstellungen verwenden, z. B. Zoom, Größe ändern und Schieben. Darüber hinaus können Sie die Hover-Animation feinabstimmen, um sie an die Bedürfnisse Ihrer Website-Idee anzupassen.
Box zum Hover-Schieberegler

Sie können den Hover-Schieberegler verwenden, wenn beim Hover ein anderer Satz von Elementen für eine Gruppe angezeigt werden muss. Wählen Sie dazu eine Gruppe aus und aktivieren Sie den Hover-Schieberegler im entsprechenden Abschnitt des Eigenschaftsfensters.
Box Border-Eigenschaft

Der Umriss ist ein sehr beliebter Effekt, der im modernen Webdesign verwendet wird. Designer verwenden Umrisse für Symbole, Schaltflächen und Rechtecke hinter Elementen. In Nicepage sind keine zusätzlichen Rechtecke erforderlich, da Sie den Umriss um Elemente herum erstellen können, indem Sie die Border-Eigenschaft für eine Box festlegen.

Kostenlose Vorlagen mit Box-Element

Beginnen Sie mit unseren besten Vorlagen, die sich für jedes Unternehmen eignen. Erstellen und passen Sie sie mit unserem leistungsstarken und kostenlosen Website-Builder ohne Code an. Alle Vorlagen sind mobilfreundlich und sehen auf jedem Gerät hervorragend aus.

How To Make Hover Animation On Box

When you create a complete group box containing several elements, you might want to add an animation that stresses its information. Our builder has a great variety of pure CSS animation examples that you can apply to the whole group and for every separate element in it as well. Apply to the group the hover over animation using HTML and CSS animation libraries and then Turn Grow, Scale or Shift effects to the image element or CTA element inside this group. The combination of CSS transitions and CSS animations will make a great impression on your site visitors and encourage them to explore other groups and elements on the page to see their animation.

See the pen animations and HTML and CSS animation examples when you build your design. These CSS animation examples will help you make the pure CSS animated and see the pen types of animations that will fulfill the media queries of any designer. Also, only a CSS animation timing function with the cubic-bezier timing function will give your pure CSS transitions and animations a smooth animation framerate. Cool CSS animation examples will help you see the animation in action and how the pure CSS animations first interact with the hover over mouse cursor.

To see the pen transition and animation in action, click on See The Pen transitions and animations to see the pen best practices and examples menu. Using only CSS custom properties can be unique but challenging without understanding the media queries and pure CSS lightweight principles. The only CSS animation that requires minimal keyframes is the machine pure CSS animation. Sign up for our news for using CSS animations even more effective in future patches.

Company
Product
Themes & Templates
Nicepage
Web Design