Css3制作动态开关的效果的实现步骤

CSS3制作动态左右开关，动态开关按钮是一款非常酷的CSS3的开关按钮，点击按钮可以左右滑动，就像开关打开闭合一样的效果，通过本篇文章给大家介绍纯CSS3代码实现滑动开关效果，需要的朋友可以参考下

<!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>

登录后复制

相信看了这些案例你已经掌握了方法，更多精彩请关注Work网其它相关文章！