CSS imitiert den sanften Umschalttasteneffekt von Apple

CSS imitiert den sanften Umschalttasteneffekt von Apple

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

Artikel empfehlen

Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage

Inhaltsverzeichnis Hintergrund Problembeschreibun...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Diese eingeführten HTML-Tags entsprechen nicht un...

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

Navicat meldet beim Verbinden mit der Datenbank d...

Details zur MySQL-Sortierfunktion

Inhaltsverzeichnis 1. Problemszenario 2. Ursachen...

Informationen zu Problemen bei der automatischen Bereitstellung von Jenkins + Docker + ASP.NET Core (Fallstricke vermeiden)

Ich hatte nicht vor, diesen Blog zu schreiben, ab...

Implementierung der VUE-Anzeige unendlicher Ebenenbaum-Datenstrukturen

Inhaltsverzeichnis Rekursiver Aufruf der Komponen...

Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung

Code kopieren Der Code lautet wie folgt: <!DOC...

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

MySQL 5.7 und höhere Versionen ermöglichen die di...

Detaillierte Analyse des React Diff-Prinzips

Inhaltsverzeichnis Diffing-Algorithmus Schicht-fü...

Beispiel für das Herunterladen von Dateien mit vue+django

Inhaltsverzeichnis 1. Übersicht 2. Django-Projekt...

Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux

1. Überprüfen Sie den Zeichensatz der Datenbank D...

Centos7-Konfiguration, Fastdfs und Analyse des Implementierungsprozesses des verteilten Dateispeichersystems Nginx

1. Installieren Sie libfastcommon-1.0.43. Das Ins...

Eine kurze Diskussion über die Platzierung von Skripten in HTML

Früher dachte ich, dass Skripte überall in HTML p...

Versprechenskapselung wx.request-Methode

Im vorherigen Artikel wurde die Implementierungsm...

Prozessdiagramm für die Ideenbereitstellung und Tomcat-Dienstimplementierung

Konfigurieren Sie zunächst die Projektartefakte K...