Zuerst ist die Idee Um diesen Effekt zu erzielen, verwenden wir das Tag Die aktivierten und deaktivierten Eigenschaften eines Kontrollkästchens entsprechen genau den Ein- und Aus-Eigenschaften eines Schalters. an: einschalten aus: ausschalten <label für="ck2"> <Eingabetyp="Kontrollkästchen" id="ck2"> <span>Wenn nicht ausgewählt, schalten Sie den Schalter aus</span> </Bezeichnung> <br> <label für="ck1"> <input type="checkbox" id="ck1" aktiviert> <span>Falls ausgewählt, schalten Sie den Schalter ein</span> </Bezeichnung> Beginnen Sie mit dem Skizzieren der Ein- und Aus-Zustände Hier möchte ich erklären, dass die Positionierung über die Position erfolgt. Wenn Sie etwas nicht verstehen, können Sie MDN öffnen, um relevante Informationen anzuzeigen. <P>Skizze des ausgeschalteten Zustands</P> <div Klasse="Umschalten"> <div Klasse="Cookie"></div> </div> <br> <P>auf Zustandsskizze</P> <div Klasse="toggle2"> <div Klasse="cookie2"></div> </div> .umschalten{ Anzeige: Inline-Block; Position: relativ; Höhe: 25px; Breite: 50px; Rahmenradius: 4px; Hintergrund: #CC0000; } .Plätzchen{ Position: absolut; links: 2px; oben: 2px; unten: 2px; Breite: 50 %; Hintergrund: rgba (230,230,230,0,9); Rahmenradius: 3px; } .toggle2{ Anzeige: Inline-Block; Position: relativ; Höhe: 25px; Breite: 50px; Polsterung: 2px; Rahmenradius: 4px; Hintergrund: #66CC33; } .cookie2{ Position: absolut; rechts: 2px; oben: 2px; unten: 2px; Breite: 50 %; Hintergrund: rgba (230,230,230,0,9); Rahmenradius: 3px; } Dann haben wir diese beiden Skizzen in das Etikett eingefügt <label für="ck4"> <Eingabetyp="Kontrollkästchen" id="ck4"> <div Klasse="Umschalten"> <div Klasse="Cookie"></div> </div> </Bezeichnung> <br> <label für="ck3"> <input type="checkbox" id="ck3" aktiviert> <div Klasse="toggle2"> <div Klasse="cookie2"></div> </div> </Bezeichnung> Kombinieren Sie Beschriftung und Kontrollkästchen, um CSS zu organisieren und zu optimieren <label für="ck5"> <Eingabetyp="Kontrollkästchen" id="ck5"> <div Klasse="Umschalten-Beenden"> <div Klasse="cookie-finish"></div> </div> </Bezeichnung> <br> <label für="ck6"> <input type="checkbox" id="ck6" aktiviert> <div Klasse="Umschalten-Beenden"> <div Klasse="cookie-finish"></div> </div> </Bezeichnung> .toggle-finish{ Cursor:Zeiger; Anzeige: Inline-Block; Position: relativ; Höhe: 25px; Breite: 50px; Rahmenradius: 4px; Hintergrund: #CC0000; } .cookie-finish{ Position: absolut; links: 2px; oben: 2px; unten: 2px; Breite: 50 %; Hintergrund: rgba (230,230,230,0,9); Rahmenradius: 3px; } Eingabe: aktiviert + .toggle-finish{ Hintergrund: #66CC33; } Eingabe: aktiviert + .toggle-finish .cookie-finish{ links: automatisch; rechts: 2px; } Damit ist die Funktion eines Schalters grundsätzlich realisiert. Denken Sie daran, den Eingang auszublenden. Sie können hier klicken, um eine Vorschau von https://codepen.io/Ritr/pen/W... anzuzeigen. Darüber hinaus habe ich auch eine animierte Version optimiert https://codepen.io/Ritr/pen/L... Zusammenfassen Oben habe ich Ihnen erklärt, wie Sie mit reinem CSS den Switch-Effekt erzielen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: js, um Drag & Drop-Sortierdetails zu erreichen
Keepalived+Nginx+Tomcat zur Erzielung eines hochv...
Beim Verknüpfen zweier Tabellen konnte kein Fremd...
Die Tabellenüberschrift kann über oder unter der ...
Als ich vor kurzem mit einem Internet-Veteranen ü...
1. Dies ist etwas kompliziert zu verstehen. Ich h...
Wie wir alle wissen, können wir in Linux ohne den...
Robots.txt ist eine reine Textdatei, in der Websi...
Die offizielle Website von Netease Kanyouxi (http...
Es gibt viele Gründe, warum eine Anwendung langsa...
In höheren Versionen von Tomcat ist der Standardm...
Dies ist das erste Mal, dass ich das CentOS7-Syst...
Ursprüngliche Absicht Der Grund für die Entwicklu...
Wenn Sie ein Linux-Meister werden möchten, ist di...
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Teilen Sie die coole zufällige QR-Code-Verifizier...