En HTML et CSS, un interrupteur à bascule est un élément d'interface utilisateur graphique qui permet à l'utilisateur de basculer entre deux états (généralement "on" et "off"). Les commutateurs à bascule sont créés à l'aide d'un élément d'entrée HTML de type « checkbox » et d'un élément d'étiquette correspondant avec un style CSS. L'élément label est stylé pour afficher l'état "on" lorsque l'entrée est sélectionnée, et l'élément label est stylé pour afficher l'état "off" lorsque l'entrée n'est pas sélectionnée.
Si nous souhaitons ajouter des fonctionnalités interactives intéressantes à notre site Web, les bascules sont un excellent choix. Ici, nous allons explorer comment créer une bascule en utilisant HTML et CSS.
La première étape de la création d'un interrupteur à bascule consiste à créer la structure de base du commutateur en utilisant HTML. Nous pouvons y parvenir en utilisant un élément div comme conteneur et en ajoutant deux éléments d'entrée pour représenter l'état marche/arrêt du commutateur.
Ceci est un morceau de code HTML.
<html>
<body>
<h3>Toggle Switch Example</h3>
<div class="toggle">
<input type="checkbox" id="toggle-checkbox" class="togglecheckbox">
<label for="toggle-checkbox" class="toggle-label"></label>
</div>
</body>
</html>
Maintenant, nous devons styliser l'interrupteur à bascule en utilisant CSS. Commencez par définir la propriété d'affichage du div du conteneur sur "inline-block" et définissez la largeur et la hauteur du commutateur sur une taille appropriée pour votre site Web ou votre application. Nous utilisons également la propriété border-radius pour créer une forme circulaire pour le commutateur.
Nous ajouterons un pseudo-élément à l'élément label et définirons son contenu sur une chaîne vide. Nous allons également lui donner une couleur de fond et le positionner absolument à l'intérieur du conteneur. Avec la case cochée, nous déplaçons le pseudo-élément vers la droite pour afficher l'état activé de l'interrupteur à bascule.
En utilisant le sélecteur :checked en CSS, nous pouvons changer la position de la couleur de fond blanc lorsque l'interrupteur est activé, créant ainsi une transition fluide et visuellement attrayante. Nous pouvons également personnaliser l'apparence du commutateur à l'aide d'autres propriétés CSS telles que la couleur d'arrière-plan, la taille de la police et l'alignement du texte.
Voici le code CSS.
<style>
body{
text-align:center;
}
.toggle {
display: inline-block;
width: 80px;
height: 38px;
background-color: #8eeb60;
border-radius: 40px;
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 34px;
}
.toggle-label:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 34px;
position: absolute;
top: 0;
left: 0;
transition: all 0.25s ease-in-out;
}
.toggle-checkbox:checked+.toggle-label:before {
transform: translateX(35px);
}
</style>
Voici un exemple de création d'un interrupteur à bascule en utilisant HTML et CSS.
<html>
<head>
<style>
body{
text-align:center;
}
.toggle {
display: inline-block;
width: 80px;
height: 38px;
background-color: #8eeb60;
border-radius: 40px;
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 34px;
}
.toggle-label:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 34px;
position: absolute;
top: 0;
left: 0;
transition: all 0.25s ease-in-out;
}
.toggle-checkbox:checked+.toggle-label:before {
transform: translateX(35px);
}
</style>
</head>
<body>
<h3>Toggle Switch Example</h3>
<div class="toggle">
<input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
<label for="toggle-checkbox" class="toggle-label"></label>
</div>
</body>
</html>
Voici un autre exemple de création d'un interrupteur à bascule à l'aide de HTML et CSS.
<html>
<head>
<style>
body{
text-align:center;
}
.toggle {
position: relative;
display: block;
width: 100px;
height: 40px;
padding: 3px;
margin: auto;
border-radius: 50px;
cursor: pointer;
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.toggle-label {
position: relative;
display: block;
height: inherit;
font-size: 12px;
background: red;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 3px
rgba(0, 0, 0, 0.15);
}
.toggle-label:before,
.toggle-label:after {
position: absolute;
top: 50%;
color: black;
margin-top: -.5em;
line-height: 1;
}
.toggle-label:before {
content: attr(data-off);
right: 11px;
color: #fff;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.toggle-label:after {
content: attr(data-on);
left: 11px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.toggle-input:checked~.toggle-label {
background: green;
}
.toggle-input:checked~.toggle-label:before {
opacity: 0;
}
.toggle-input:checked~.toggle-label:after {
opacity: 1;
}
.toggle-handle {
position: absolute;
top: 4px;
left: 4px;
width: 38px;
height: 38px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
border-radius: 50%;
}
.toggle-handle:before {
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 16px;
height: 16px;
}
.toggle-input:checked~.toggle-handle {
left: 64px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition*/
.toggle-label,
.toggle-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
</style>
</head>
<body>
<h3>Toggle Switch by using HTML and CSS</h3>
<label class="toggle">
<input class="toggle-input" type="checkbox" />
<span class="toggle-label" data-off="OFF" data-on="ON"></span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
Créer une bascule à l'aide de HTML et CSS est un processus simple qui peut ajouter beaucoup de valeur à votre site Web ou à votre application. En suivant ces étapes et en expérimentant différentes propriétés CSS, nous pouvons créer une bascule unique, visuellement attrayante et facile à utiliser.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelle est la différence entre l'écran d'origine et l'écran assemblé ?
Solution de rapport d'erreur de fichier SQL d'importation Mysql
Comment télécharger le panneau de configuration nvidia
Java conserve deux décimales
Comment résoudre le problème du démarrage lent de l'ordinateur
Que faire si notepad.exe ne répond pas
Causes et solutions du délai d'expiration de la passerelle 504
Mise à niveau du Samsung s5830
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
