Verwenden Sie CSS3, um das Umschalten von Switch-Komponenten zu implementieren

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von CSS3 zum Implementieren der Switch-Komponente vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Formularbasiertes Kontrollkästchen

Rendering

Prinzip

Das Kontrollkästchen hat zwei Zustände: deaktiviert und aktiviert. Ändern Sie zunächst den Standardstil des Browsers: „Keine“. Der Code in diesem Artikel wird nur bei Bedarf ausgeführt Kompatibilitätscode schreiben, einfach Präfixe zu Aussehen und Übergang hinzufügen

HTML-Code

<input class=&#39;switch-component&#39; type=&#39;checkbox&#39;>

CSS-Code

// switch组件
.switch-component {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #dadada;
  border-radius: 30px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  transition: all .2s ease;
}

// 按钮
switch-component::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transition: all .2s ease;
 }

// checked状态时，背景颜色改变
.switch-component:checked {
  background-color: #86c0fa;
}

// checked状态时，按钮位置改变
.switch-component:checked::after {
  left: 50%;
 }

Verwandte Empfehlungen:

CSS3 implementiert den Switch-Komponenten-Switch

Detaillierte Erläuterung der Verwendung von Switch in PHP

JS verwendet den Schalter, um die Codefreigabe der ternären Operation während und der Attributoperation zu bestimmen

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um das Umschalten von Switch-Komponenten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!