1. Effect display
The animation effect is not easy to display, but it has been realized
2. Code display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding-top: 200px;
/* 设置文本框居中 */
background-color: #fff;
}
.check_box {
position: relative;
cursor: pointer;
/* 鼠标移 */
}
.check_box span {
display: block;
width: 80px;
height: 40px;
background-color: #95d485;
border-radius: 40px;
box-shadow: inset 0 1px 8px rgba(0, 0, 0, .3), inset 0 -2px 2px rgba(0, 0, 0, .3), 2px 2px 2px #ccc;
transition: all .5s;
}
.check_box i {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background-color: #f1f1f1;
border-radius: 50%;
/* 设置位置 */
transform: scale(0.9);
/* 设置阴影 */
box-shadow: 0 2px 6px rgba(0, 0, 0, .5),
inset 0 3px 3px rgba(0, 0, 0, .2);
transition: all 0.5s;
/* 设置过度 */
}
/* 设置复选框选中时的样式 */
.check_box input:checked~i {
left: 40px;
}
.check_box input:checked~span {
background-color: #f7ea7a;
}
</style>
</head>
<body>
<label class="check_box" for="check">
<input type="checkbox" id="check" hidden>
<span></span>
<i></i>
</label>
</body>
</html>