Comment obtenir un effet de commutation en CSS-tutoriel CSS-php.cn

Comment obtenir un effet de commutation en CSS

王林

Libérer： 2020-03-19 13:23:28

avant

2154 Les gens l'ont consulté

Comment obtenir un effet de commutation en CSS

La première est l'idée :

Nous utilisons la balise

Les fonctionnalités cochées et décochées de la case à cocher correspondent à l'activation et la désactivation de l'interrupteur

on:on off:off

<label for="ck2">
  <input type="checkbox" id="ck2">
  <span>未选中，则关闭开关</span>
</label>
<br>
<label for="ck1">
  <input type="checkbox" id="ck1" checked>
  <span>选中，则打开开关</span>
</label>

Copier après la connexion

Effet :

Comment obtenir un effet de commutation en CSS

(Tutoriel recommandé : Tutoriel d'introduction CSS)

Commencez à dessiner le croquis des états activé et désactivé

Ici, je vais vous expliquer comment utiliser la position pour obtenir un positionnement. Les étudiants qui ne comprennent pas peuvent ouvrir MDN pour vérifier les connaissances pertinentes

<P>off状态草图</P>
<div class="toggle">
  <div class="cookie"></div>
</div>
<br>
<P>on状态草图</P>
<div class="toggle2">
  <div class="cookie2"></div>
</div>
.toggle{
  display:inline-block;
  position:relative;
  height:25px;
  width:50px;  
  border-radius:4px;
  background:#CC0000;
}
.cookie{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}
.toggle2{
  display:inline-block;
  position:relative;
  height:25px;
  width:50px; 
  padding:2px;
  border-radius:4px;
  background:#66CC33;  
}
.cookie2{
  position:absolute;
  right:2px;
  top:2px;
  bottom:2px;  
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}

Copier après la connexion

Effet :

Comment obtenir un effet de commutation en CSS

Ensuite, nous mettons ces deux croquis dans l'étiquette

<label for="ck4">
  <input type="checkbox" id="ck4">
  <div class="toggle">
    <div class="cookie"></div>
  </div>
</label>
<br>
<label for="ck3">
  <input type="checkbox" id="ck3" checked>
  <div class="toggle2">
    <div class="cookie2"></div>
  </div>
</label>

Copier après la connexion

Effet :

Comment obtenir un effet de commutation en CSS

Combinez l'étiquette et la case à cocher pour organiser et optimiser le CSS

<label for="ck5">
  <input type="checkbox" id="ck5">
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
<br>
<label for="ck6">
  <input type="checkbox" id="ck6" checked>
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
.toggle-finish{
  cursor:pointer;
  display:inline-block;
  position:relative;
  height:25px;
  width:50px;  
  border-radius:4px;
  background:#CC0000;
}
.cookie-finish{
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  width:50%;
  background:rgba(230,230,230,0.9);
  border-radius:3px;
}
input:checked + .toggle-finish{
  background:#66CC33;  
}
input:checked + .toggle-finish .cookie-finish{ 
  left:auto;
  right:2px;
}

Copier après la connexion

Effet :

Comment obtenir un effet de commutation en CSS