Étapes pour implémenter l'effet de création de commutateurs dynamiques avec CSS3-tutoriel CSS-php.cn

Étapes pour implémenter l'effet de création de commutateurs dynamiques avec CSS3

php中世界最好的语言

Libérer： 2017-12-01 14:26:36

original

1879 Les gens l'ont consulté

CSS3 crée des commutateurs dynamiques à gauche et à droite. Le bouton de commutation dynamique est un bouton de commutation CSS3 très cool. Cliquez sur le bouton pour glisser vers la gauche et la droite, tout comme le commutateur est ouvert et fermé. À travers cet article, je vais présenter le CSS3 pur. code pour réaliser le glissement. Les amis qui en ont besoin peuvent se référer à

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background: black;
}
* {
margin: 0;
padding: 0;
}
body {
padding: 26%;
}
.button {
display: inline-block;
position: relative;
height: 40px;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
background-color: #eee;
border-radius: 30px;
}
input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.button:before {
content: "";
display: inline-block;
width: 80px;
height: 42px;
background-color: #fff;
border-radius: 42px;
box-sizing: border-box;
border: 2px solid #eee;
transition: all 0.2s linear;
}
.button:after {
position: absolute;
left: 2px;
top: 2px;
content: "";
display: inline-block;
width: 38px;
height: 38px;
background-color: #fff;
border-radius: 40px;
transition: all 0.2s linear;
box-shadow: 0px 1px 3px #bbb;
}
input:checked ~ .button:before {
background-color: red;
border: 1px solid red;
}
input:checked ~ .button:after {
left: 40px;
}
</style>
</head>
<body>
<input type="checkbox" id="swtich">
<label for="swtich"></label>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background: black;
}
* {
margin: 0;
padding: 0;
}
body {
padding: 26%;
}
.button {
display: inline-block;
position: relative;
height: 40px;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
background-color: #eee;
border-radius: 30px;
}
input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.button:before {
content: "";
display: inline-block;
width: 80px;
height: 42px;
background-color: #fff;
border-radius: 42px;
box-sizing: border-box;
border: 2px solid #eee;
transition: all 0.2s linear;
}
.button:after {
position: absolute;
left: 2px;
top: 2px;
content: "";
display: inline-block;
width: 38px;
height: 38px;
background-color: #fff;
border-radius: 40px;
transition: all 0.2s linear;
box-shadow: 0px 1px 3px #bbb;
}
input:checked ~ .button:before {
background-color: red;
border: 1px solid red;
}
input:checked ~ .button:after {
left: 40px;
}
</style>
</head>
<body>
<input type="checkbox" id="swtich">
<label for="swtich"></label>
</body>
</html>

Copier après la connexion

pour l'effet de commutation. Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture connexe :

Introduction détaillée de CSS3 à l'attribut translation

Introduction détaillée de CSS3 à l'attribut background-size

Comment utiliser la fonction CSS3 rotate()

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!