HTML - es ist eine universelle Markup-Sprache, die häufig zum Erstellen von Webseiten verwendet wird. Es ermöglicht Ihnen, einer Seite verschiedene Elemente hinzuzufügen, einschließlich Text, Bilder, Links und Schaltflächen. Schaltflächen sind ein wichtiges Element des Webdesigns, da sie es Benutzern ermöglichen, mit einer Webseite zu interagieren. In diesem Artikel werden wir uns ansehen, wie Sie eine pulsierende Schaltfläche in HTML mit CSS und JavaScript erstellen.
Das Schlüsselwerkzeug, das wir benötigen, ist CSS. Mit CSS können wir Elemente auf einer Seite stilisieren, indem wir ihnen bestimmte Eigenschaften zuweisen. Um eine pulsierende Schaltfläche zu erstellen, benötigen wir eine Animation, die mit CSS implementiert werden kann.
Um zu beginnen, erstellen wir eine Schaltfläche in HTML mit Tags . Fügen Sie dann der Schaltfläche eine CSS-Klasse hinzu, um sie zu stylen. Fügen Sie eine Welligkeitsanimation mithilfe der CSS-Eigenschaft animation hinzu. Verwenden wir JavaScript, um die Animation zu steuern, indem wir die Pulsate–Klasse beim Laden der Seite auf die Schaltfläche setzen und sie nach einiger Zeit entfernen, damit sich der Ripple-Effekt wiederholen kann.
Wie erstelle ich einen Welligkeitseffekt für eine Schaltfläche
Um einen Welligkeitseffekt für eine Schaltfläche in HTML hinzuzufügen, müssen Sie eine CSS-Animation verwenden. Hier sind die Schritte, die Sie befolgen sollten, um einen solchen Effekt zu erzeugen:
- Erstellen Sie eine Schaltfläche mit einem Tag .
- Fügen Sie der Schaltfläche eine Klasse oder eine ID hinzu.
- Erstellen Sie eine neue CSS-Regel mit dieser Klasse oder ID.
- Fügen Sie innerhalb dieser Regel mithilfe der Animation-Eigenschaft eine Animation hinzu.
Hier ist ein Beispiel für CSS-Code, der einen Ripple-Effekt für eine Schaltfläche erzeugt:
.btn-pulse @keyframes pulse 50% 100% >
In diesem Beispiel eine Klasse .btn-pulse wird auf die Taste angewendet. Die Pulse-Animation wird mit dem @keyframes-Schlüsselwort definiert, das die Animationsschritte festlegt. Der Wert 1s gibt die Dauer der Animation in 1 Sekunde an. Und die Keyframes zeigen an, wie die Schaltfläche während der Animation ihre Größe ändern soll.
Setze eine Klasse ein .btn-pulse ist für die Taste, und sie blinkt und erzeugt einen Welligkeitseffekt.
Sie können die Dauer, das Intervall und andere Animationsparameter anpassen, indem Sie die Werte im CSS-Code ändern.
Beginnen Sie mit der Basis
Bevor Sie eine pulsierende Schaltfläche in HTML erstellen können, müssen Sie die Grundlagen der Arbeit mit dieser Markupsprache verstehen. HTML (HyperText Markup Language) ist eine Sammlung von Tags und Attributen, die die Struktur und den Inhalt einer Webseite definieren.
Eines der wichtigsten Tags, die in HTML verwendet werden, ist das Tag
, mit dem Sie Tabellen auf einer Webseite erstellen können. Die Tabelle besteht aus Zeilen (), die Zellen enthalten (
Im nächsten Teil des Artikels werden wir darüber sprechen, wie Sie eine Tabelle erstellen und mit Daten füllen können. Außerdem betrachten wir die grundlegenden Attribute der Tabelle und der Zellen, die wir benötigen, um eine pulsierende Schaltfläche zu erstellen.
Fügen Sie Stile für die Schaltfläche hinzu
Jetzt, da wir einen pulsierenden Knopf erstellt haben, fügen wir einige Stile hinzu, damit er noch attraktiver aussieht.
Wir können CSS verwenden, um den Hintergrund der Schaltfläche, die Textfarbe und die Größe zu ändern. Zum Beispiel können wir die Hintergrundfarbe einer Schaltfläche festlegen:
- Markieren Sie die Schaltfläche mit dem CSS-Selektor:
- button.pulse
- Stellen Sie die Hintergrundfarbe ein:
- background-color: #337ab7;
Die Schaltfläche hat jetzt einen blauen Hintergrund.
Außerdem können wir die Farbe des Schaltflächentextes so ändern, dass er kontrastreicher ist:
- Stellen Sie die Textfarbe ein:
- color: white;
Der Text auf der Schaltfläche wird nun weiß angezeigt.
Wir können auch die Größe der Schaltfläche ändern, um sie sichtbarer zu machen:
- Legen Sie die Breite der Schaltfläche fest:
- width: 200px;
- Stellen Sie die Höhe der Schaltfläche ein:
- height: 50px;
Die Schaltfläche hat jetzt eine Breite von 200 Pixeln und eine Höhe von 50 Pixeln.
Sie können andere CSS-Eigenschaften verwenden, um den Stil der Schaltfläche nach Ihren Wünschen zu ändern. Haben Sie keine Angst zu experimentieren!
Erstellen Sie eine Welligkeitsanimation
- Erstellen Sie eine Schaltfläche mit einem Tag . Schreiben Sie in den Text, der auf der Schaltfläche angezeigt wird.
- Verwenden Sie CSS, um Animationen hinzuzufügen. Fügen Sie der Schaltfläche mithilfe des class-Attributs eine Klasse hinzu. Zum Beispiel,.
- Erstellen Sie einen neuen Stil in Ihrer CSS-Datei und weisen Sie ihm einen Namen zu, der der Schaltflächenklasse entspricht. Zum Beispiel,.pulse-button .
- Fügen Sie dem Schaltflächenstil eine Animationseigenschaft hinzu. Legen Sie den Eigenschaftswert auf pulse 1s infinite fest . Auf diese Weise wird die Animation auf unbestimmte Zeit fortgesetzt.
- Erstellen Sie einen neuen Stil mit dem Namen @keyframes pulse . In diesem Stil legen Sie fest, wie die Welligkeitsanimation aussehen wird.
- Fügen Sie innerhalb des @keyframes pulse-Stils zwei Keyframes hinzu: 0% und 100% .
- Stellen Sie bei 0% den Radius der Taste auf 10px ein . Dies wird der Anfangswert sein.
- Stellen Sie bei 100% den Radius der Taste auf 20px ein . Auf diese Weise wird die Taste bei jedem Pulsieren an Größe zunehmen.
Nachdem Sie diese Schritte angewendet haben, sollte Ihre Schaltfläche beginnen zu pulsieren und die Aufmerksamkeit der Benutzer zu erregen.
Wenden Sie die Animation auf die Schaltfläche an
Um einer Schaltfläche eine Welligkeit hinzuzufügen, können wir eine CSS-Animation verwenden. Hier ist ein Beispielcode, der eine Welligkeit für eine Schaltfläche erzeugt:
@keyframes pulse 50% 100% >.pulse-button In diesem Beispiel definieren wir eine CSS-Animation mit dem Namen pulse, die die Schaltfläche von 1 auf 1.1 skaliert und dann auf den ursprünglichen Wert zurückgibt. Dann wenden wir diese Animation auf die Schaltfläche an, indem wir ihr eine Klasse zuweisen pulse-button. Die Taste pulsiert endlos.
Sie können die Dauer und Geschwindigkeit der Animation sowie andere Stileigenschaften ändern, um den gewünschten Effekt zu erzielen.
Konfigurieren Sie die Animationseinstellungen
Nachdem Sie die grundlegende Schaltflächenstruktur erstellt und die gewünschten Stile hinzugefügt haben, ist es an der Zeit, die Animationseinstellungen anzupassen, um einen Welligkeitseffekt zu erzeugen.
In CSS können Sie die Eigenschaft verwenden animation zum Festlegen der Animationsparameter der Schaltfläche. Eigenschaft animation legt den Namen der Animation, die Dauer, die Verzögerung und die Anzahl der Wiederholungen fest.
Ein Beispiel für das Festlegen einer Animation mit dem Namen "pulse" in CSS lautet wie folgt:
In diesem Beispiel haben wir eine Animation mit dem Namen "pulse" erstellt, mit der die Schaltfläche skaliert wird. Um 0% ist der Maßstab der Schaltfläche 1, um 50% wird der Maßstab auf 1 vergrößert.1, und die Skalierung wird zu 100% auf den ursprünglichen Wert 1 zurückgesetzt.
Um die erstellte Animation auf eine Schaltfläche anzuwenden, fügen Sie die folgenden CSS-Eigenschaften hinzu:
In diesem Beispiel haben wir eine Animation mit dem Namen "pulse" auf die Button-Klasse angewendet. Wir haben die Animationsdauer mit der Eigenschaft auf 1 Sekunde festgelegt animation-duration. Parameter animation-timing-function legt die Funktion für die Animationszeit fest, in diesem Fall "ease-in-out" sorgt für einen reibungslosen Übergang in allen Phasen der Animation. Wert "infinite" in der Eigenschaft animation-iteration-count zeigt eine endlose Wiederholung der Animation an.
Passen Sie die Werte der Animationsparameter nach Ihren Wünschen an, um einen Welligkeitseffekt zu erzeugen, der Ihrem Design und Ihren Bedürfnissen entspricht.
Verwenden Sie die pulsierende Schaltfläche auf Ihrer Website
Wenn Sie eine pulsierende Schaltfläche auf Ihrer Website verwenden möchten, benötigen Sie etwas HTML und CSS. Der folgende Code zeigt, wie eine pulsierende Schaltfläche erstellt wird:
Im obigen Beispiel verwenden wir die "pulse-button" -Klasse, um die Schaltfläche zu stylen. Diese Klasse enthält die erforderlichen CSS-Stile, um einen Welligkeitseffekt zu erzeugen.
Hier ist ein Beispiel für CSS-Code zum Erstellen von Ripple:
animation: pulse 1s infinite;
