CSS imitiert den sanften Umschalttasteneffekt von Apple

Inhaltsverzeichnis

1. Code-Analyse
2. Quellcode

Quellcode

1. Code-Analyse

1.1 HTML-Code-Analyse

<div Klasse="Kontrollkästchen">
  <div Klasse="inner" id="inner">
    <div Klasse="Umschalten" id="Umschalten"></div>
  </div>
</div>

Das äußerste Kontrollkästchen ist die gesamte Schaltfläche, das innere ist der Bereich, der vom grünen Kästchen unter „EIN“ eingenommen wird, und der Umschalter ist der anklickbare EIN- und AUS-Bereich.

1.2 CSS-Codeanalyse zum Festlegen der Textschriftart und der Hintergrundfarbe

Körper{
  Rand: 0;
  Polsterung: 0;
  Schriftfamilie: serifenlos;
  Hintergrund: #dcdcdc;
}

Legen Sie die Hintergrundfarbe, Position, kreisförmige Umrandung, Farbe und Dicke der oberen und unteren Umrandung der Schaltfläche fest.

.checkbox{
  Position: absolut;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  Breite: 100px;
  Höhe: 50px;
  Rahmenradius: 25px;
  Hintergrund: linearer Farbverlauf (0 Grad, #d8d8d8, #cccccc);
  Rahmen oben: 0,02em durchgezogen #ececec;
  Rahmen unten: 0,02em durchgezogen #ececec;
}

Legen Sie die Positionen oben, unten, links und rechts des grünen Hintergrundbereichs fest, um die Breite und Höhe zu bestimmen. Beachten Sie, dass Breite und Höhe hier nicht festgelegt werden. Die Standardeinstellung ist automatisch.

Hintergrund festlegen, kreisförmiger Rand, Schatten

.checkbox .inner{
  Position: absolut;
  /*Da Breite und Höhe nicht festgelegt sind, ist dies möglich*/
  oben: 10px;
  links: 10px;
  rechts: 10px;
  unten: 10px;
  Hintergrund: linearer Farbverlauf (0 Grad, #a5a5a5, #717171);
  Rahmenradius: 20px;
  Box-Schatten: Einschub 0 0 15px rgba(0,0,0,.5);
}

Legen Sie Größe, Position, Farbe, Hintergrund, Schatten sowie die oberen und unteren Rahmenstile der Schaltfläche „Ein/Aus“ fest und stellen Sie die Animationszeit der Schaltfläche auf 0,5 s ein.

.checkbox .inner .toggle{
  Position: absolut;
  oben: -3px;
  links: -3px;
  Breite: 36px;
  Höhe: 36px;
  Randradius: 50 %;
  Hintergrund: linearer Farbverlauf (0 Grad, #ccc, #e4e4e4);
  Kastenschatten: 0 4px 6px rgba(0,0,0,.2);
  Box-Größe: Rahmenbox;
  Rahmen oben: 0,04em durchgezogen #ececec;
  Rahmen unten: 0,01em durchgezogen #ececec;
  Übergang: 0,5 s;
}

Stellen Sie den Stil „AUS“ ein. Breite und Höhe werden durch die Positionierung oben, unten, links und rechts bestimmt. Legen Sie den Hintergrund und den kreisförmigen Rahmen fest. Mit line-height wird die Schriftart vertikal zentriert.

.checkbox .inner .toggle:before{
  Inhalt: "AUS";
  Position: absolut;
  oben: 4px;
  links: 4px;
  rechts: 4px;
  unten: 4px;
  Hintergrund: linearer Farbverlauf (0 Grad, #e4e4e4, #ccc);
  Randradius: 50 %;
  Textausrichtung: zentriert;
  Schriftgröße: 10px;
  Zeilenhöhe: 28px;
  Farbe: #a9a9a9;
}

Stellen Sie die Schriftart der Schaltfläche nach dem Klicken auf „ON“ ein. Der Grund, warum keine anderen Eigenschaften geschrieben werden, liegt darin, dass andere Eigenschaften checkbox .inner .toggle:before erben.

.checkbox .inner.active .toggle:before{
  Inhalt: "EIN";
  Farbe: #00d22d;
}

Beim Klicken auf die Schaltfläche bewegt sich der Schieberegler nach rechts und ändert die Hintergrundfarbe. Die Änderungszeit beträgt 0,5 s.

.checkbox .inner.active .toggle{
  links: 47px;
}
.checkbox .inner.active{
  Hintergrund: linearer Farbverlauf (0 Grad, #00d22d, #158a00);
}

1.3 JavaScript-Codeanalyse

<Skript>
  let inner = document.getElementById('inner');
  lass umschalten = inner.children[0];
  toggle.addEventListener('klicken', ()=>{
    wenn(inner.classList.contains('active')){
      inner.classList.remove('aktiv');
    }anders {
      inner.classList.add('aktiv');
    }
  })
</Skript>

Zuerst erhalten Sie innere und Umschaltfläche, ein Hintergrundfarbfeld und einen runden Knopf
Registrieren Sie das Klickereignis für den Button-Umschalter und klicken Sie auf die Schaltfläche EIN/AUS, um es wirksam zu machen
Wenn inner aktiv ist, d. h. das innere Element die aktive Klasse enthält, entfernen Sie es. Wenn es sie nicht enthält, fügen Sie sie hinzu. Führen Sie in jedem Fall den umgekehrten Vorgang aus.
Wenn „Inner“ aktiv ist, bewegt sich der Schalter nach rechts und die innere Hintergrundfarbe ändert sich. Stellen Sie dies in CSS ein.
Sie sind fertig. Der Vorgang ist wie folgt

2. Quellcode

2.1 HTML-Quellcode

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <link rel="stylesheet" href="2020_12_24.css">
</Kopf>
<Text>
<div Klasse="Kontrollkästchen">
  <div Klasse="inner" id="inner">
    <div Klasse="Umschalten" id="Umschalten"></div>
  </div>
</div>
<Skript>
  let inner = document.getElementById('inner');
  lass umschalten = inner.children[0];
  toggle.addEventListener('klicken', ()=>{
    wenn(inner.classList.contains('active')){
      inner.classList.remove('aktiv');
    }anders {
      inner.classList.add('aktiv');
    }
  })
</Skript>
</body>
</html>

2.2 CSS-Quellcode

Körper{
  Rand: 0;
  Polsterung: 0;
  Schriftfamilie: serifenlos;
  Hintergrund: #dcdcdc;
}
.checkbox{
  Position: absolut;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  Breite: 100px;
  Höhe: 50px;
  Rahmenradius: 25px;
  Hintergrund: linearer Farbverlauf (0 Grad, #d8d8d8, #cccccc);
  Rahmen oben: 0,02em durchgezogen #ececec;
  Rahmen unten: 0,02em durchgezogen #ececec;
}
.checkbox .inner{
  Position: absolut;
  /*Da Breite und Höhe nicht festgelegt sind, ist dies möglich*/
  oben: 10px;
  links: 10px;
  rechts: 10px;
  unten: 10px;
  Hintergrund: linearer Farbverlauf (0 Grad, #a5a5a5, #717171);
  Rahmenradius: 20px;
  Box-Schatten: Einschub 0 0 15px rgba(0,0,0,.5);
}
.checkbox .inner .toggle{
  Position: absolut;
  oben: -3px;
  links: -3px;
  Breite: 36px;
  Höhe: 36px;
  Randradius: 50 %;
  Hintergrund: linearer Farbverlauf (0 Grad, #ccc, #e4e4e4);
  Kastenschatten: 0 4px 6px rgba(0,0,0,.2);
  Box-Größe: Rahmenbox;
  Rahmen oben: 0,04em durchgezogen #ececec;
  Rahmen unten: 0,01em durchgezogen #ececec;
  Übergang: 0,5 s;
}
.checkbox .inner .toggle:before{
  Inhalt: "AUS";
  Position: absolut;
  oben: 4px;
  links: 4px;
  rechts: 4px;
  unten: 4px;
  Hintergrund: linearer Farbverlauf (0 Grad, #e4e4e4, #ccc);
  Randradius: 50 %;
  Textausrichtung: zentriert;
  Schriftgröße: 10px;
  Zeilenhöhe: 28px;
  Farbe: #a9a9a9;
}
.checkbox .inner.active .toggle:before{
  Inhalt: "EIN";
  Farbe: #00d22d;
}
.checkbox .inner.active .toggle{
  links: 47px;
}
.checkbox .inner.active{
  Hintergrund: linearer Farbverlauf (0 Grad, #00d22d, #158a00);
}

Dies ist das Ende dieses Artikels über CSS, das Apples Smooth Switch Button-Effekt imitiert. Weitere verwandte CSS Smooth Switch Button-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Beispiel für die Verwendung von HTML+CSS zur Implementierung einer sekundären Menüleiste beim Bewegen der Maus

>>: Empfehlen Sie eine coole interaktive Website, die von einem Front-End-Ingenieur erstellt wurde

So implementieren Sie ein responsives Layout in Vue-CLI

Informationen zur Verwendung von Keepalived zum Erreichen eines automatischen Neustarts von Nginx und einer hohen Verfügbarkeit von Dual Active Hot Standby

Inhaltsverzeichnis 1. Übersicht 2. Verwenden Sie ...

CSS imitiert den sanften Umschalttasteneffekt von Apple

Inhaltsverzeichnis

1. Code-Analyse

2. Quellcode

So implementieren Sie ein responsives Layout in Vue-CLI

Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen

HTML-Tabellen-Markup-Tutorial (38): Rahmenfarben-Attribut der Kopfzeile BORDERCOLOR

CentOS-System-RPM-Installation und -Konfiguration von Nginx

Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs

So fügen Sie Wettervorhersagen in Ihre Website ein

isPrototypeOf-Funktion in JavaScript

Beispiel zum Einrichten eines Linux-Systems zur automatischen Ausführung eines Skripts beim Start

Detailliertes Tutorial zur Registrierung und Aktivierung von Navicat für MySQL 15

Detaillierte Erklärung der Nodejs-Array-Warteschlange und der forEach-Anwendung

Artikel empfehlen

So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)

CentOS 6 verwendet Docker zum Bereitstellen eines Zookeeper-Betriebsbeispiels

5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile

Informationen zur Verwendung von Keepalived zum Erreichen eines automatischen Neustarts von Nginx und einer hohen Verfügbarkeit von Dual Active Hot Standby

VUE Erste Schritte Erlernen der Ereignisbehandlung

Methode zum Erstellen eines privaten Docker-Warehouses basierend auf Harbor

Einfaches Beispiel für die Definition und Verwendung von MySQL-Triggern

Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung

So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung

MySql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „OR“

Einfaches MySQL-Beispiel zum Sortieren chinesischer Schriftzeichen nach Pinyin

Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Wie implementiert MySQL ACID-Transaktionen?

Zusammenfassung häufiger Probleme und Lösungen in Vue (empfohlen)

Installationsprozess von MySQL5.7.22 auf dem Mac