input[type="checkbox"]{
width: 0;
height: 0px;
visibility: hidden;
}
label{
display: block;
width: 500px;
height: 150px;
background-color:red;
/*
border-radius：该属性允许您为元素添加圆角边框！
属性是一个简写属性，用于设置四个 border-*-radius 属性。
*:-top-left/-top-right/-bottom-right/-bottom-left
*/
border-radius: 100px;
position: relative;
/* 光标呈现为指示链接的指针（一只手） */
cursor: pointer;
/*
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始
*/
transition: 0.5s;
/* box-shadow 属性向框添加一个或多个阴影。 */
box-shadow: 0 0 20px #477a8550;
}
/* 创建切换球 */
label::after{
content:"";
width:120px;
height: 120px;
background-color: yellow;
position: absolute;
border-radius: 70px;
top:15px;
left:15px;
transition:0.5s;
}
/* 添加动画 */
input:checked+label::after{
left: calc(100% - 10px);
transform: translateX(-100%);
}
input:checked+label{
background-color: green;
}
/*更加平滑的磁性效果*/
label:active::after{
width:160px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox"></label>
</body>
</html>
https://mp.weixin.qq.com/s?fontRatio=1&__biz=MzAwNjI1MzI3OQ==&mid=2648997093&idx=2&sn=8a99ccd81fdcf9439b34d63586e4979e&scene=94&subscene=315&passparam=searchid%3D13900334395372895564&clicktime=1630742460&enterid=1630742460&ascene=64&devicetype=android-30&version=28000b3b&nettype=WIFI&lang=en&exportkey=A%2Fbk9DZU8i2D1QHMa9Ik4jQ%3D&pass_ticket=dbHg%2FdrZt%2FAU7bRXnqHnWSr2107aFhsjPjT%2BAKM0ER1MZ%2BVkL4a4pt0hhfl1YLp%2F&wx_header=1