CSS3 implementiert den Switch-Komponenten-Switch

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, um einen Blick darauf zu werfen. 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 Schreiben Sie Kompatibilitätscode, fügen Sie einfach Präfixe zu Aussehen und Übergang

HTML-Code

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

CSS-Code

<🎜 hinzu >

// 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:

Detaillierte Einführung der WeChat-Applet-Switch-Komponente

Das obige ist der detaillierte Inhalt vonCSS3 implementiert den Switch-Komponenten-Switch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!