Erstellen Sie eine Umschalttaste in HTML, CSS und JavaScript

Dieser Artikel wurde ursprünglich unter
veröffentlicht https://notarena.com/

Dieser Code erstellt eine animierte Umschalttaste, die zwischen hellem und dunklem Modus wechselt, indem sie die Klasse „dunkel“ zum Körperelement hinzufügt oder entfernt. Die Umschalttaste verfügt über einen Kreis, der sanft übergeht, um den Modus anzuzeigen, und auch der Hintergrund des Körpers wechselt sanft für ein nahtloses Erlebnis.

Ich verwende Morphismus-Effekte. Die Schaltfläche und der Hintergrund haben einen schönen Übergang, der dem Kippschalter einen Hauch von Eleganz verleiht. Diese Art von Umschalttaste kann in verschiedenen Websites oder Anwendungen verwendet werden, insbesondere in solchen, die möglicherweise einen Hell- und Dunkelmodus für eine bessere Zugänglichkeit oder einfach nur eine andere Designoption für den Benutzer erfordern.

Das könnte Ihnen gefallen

• Animation der Schaltfläche „Teilen“
• Benutzerdefinierte Optionsfelder

Um eine Umschaltfläche mit HTML, CSS und JavaScript zu erstellen, müssen Sie zwei Dateien erstellen: eine HTML-Datei und eine CSS-Datei. Nachdem Sie diese Dateien erstellt haben, können Sie den bereitgestellten Code kopieren und in sie einfügen. Sie können auch den gesamten Quellcode kopieren.

Umschaltfläche in HTML, CSS und JavaScript erstellen
Erstellen Sie einen Ordner: Erstellen Sie zunächst einen Ordner für Ihr Projekt. Sie können es beliebig benennen. In diesem Ordner müssen Sie die folgenden Dateien erstellen:

index.html (für die Struktur Ihres Umschaltknopfs erstellen)
style.css (zum Gestalten der Schaltfläche „Erstellen“)
Erstellen Sie die HTML-Datei:

Nennen Sie Ihre HTML-Datei index.html.
Erstellen Sie die CSS-Datei:

Nennen Sie Ihre CSS-Datei style.css.
Erstellen Sie die JavaScript-Datei:

Nennen Sie Ihre JavaScript-Datei script.js.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Umschalttaste in HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!