Heim >Web-Frontend >CSS-Tutorial >Schritte zum Implementieren des Effekts der Erstellung dynamischer Schalter mit CSS3
Schritte zum Implementieren des Effekts der Erstellung dynamischer Schalter mit CSS3
- php中世界最好的语言Original
- 2017-12-01 14:26:361875Durchsuche
CSS3 macht dynamische Links- und Rechtsschalter. Klicken Sie auf die Schaltfläche, um nach links und rechts zu schieben. In diesem Artikel werde ich reines CSS3 vorstellen Code zum Realisieren des Gleitens. Freunde, die ihn benötigen, können sich auf
<!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>beziehen, um den Umschalteffekt zu erfahren. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Einführung von CSS3 zum Übersetzungsattribut
Detaillierte Einführung von CSS3 zum Hintergrundgrößenattribut
So verwenden Sie die CSS3-Funktion rotation()
Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren des Effekts der Erstellung dynamischer Schalter mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!