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ösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann

Die Lösung für das Problem, dass Ubuntu 18.04 in ...

Detaillierte Analyse des MySQL 8.0-Redo-Logs

Inhaltsverzeichnis Vorwort Generierung eines Redo...

Weitergabe von Techniken für Farbkontrast und -harmonie im Web

Farbkontrast und Harmonie Unter kontrastierenden ...

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung

Verwandte Artikel: Installieren Sie Docker mit yu...

CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial

Die meisten Leute kompilieren MySQL und legen es ...

Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images

Die erste Lösung besteht darin, das Bild in ein ö...

Detaillierte Erläuterung verschiedener Fehlerbehandlungen, wenn Nginx nicht gestartet werden kann

Bei der Verwendung von Nginx als Webserver sind m...

Zwei Methoden der MySql-Kommaverkettungs-Stringabfrage

Die folgenden beiden Funktionen werden auf die gl...

Erläuterung der grundlegenden Syntax gespeicherter Prozeduren in der MySQL-Datenbank

Löschprozedur sp_name/ Zuvor habe ich Ihnen die G...

So konfigurieren Sie pseudostatisches und clientadaptives Nginx

Das Backend verwendet das Framework thinkphp3.2.3...

VMware + Ubuntu18.04 Grafisches Tutorial zum Erstellen einer Hadoop-Clusterumgebung

Inhaltsverzeichnis Vorwort VMware-Klon virtueller...

Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder

CSS-Transformationen sind zwar cool, wurden aber ...

Nginx leitet dynamisch an Upstream weiter, entsprechend dem Pfad in der URL

In Nginx gibt es einige erweiterte Szenarien, in ...

mysqldump-Parameter, die Sie möglicherweise nicht kennen

Im vorherigen Artikel wurde erwähnt, dass die in ...

Stellen Sie einen Varnish-Cache-Proxyserver basierend auf Centos7 bereit

1. Lackübersicht 1. Einführung in Varnish Varnish...