共计 1577 个字符，预计需要花费 4 分钟才能阅读完成。
代码来自头条号 ” 前端小智 ”, 侵权删
<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #000;
}
input[type="radio"] { /* 设置底下的形态和大小 */
position: relative;
width: 120px;
height: 40px;
outline: none;
cursor: pointer;
background: #000;
-webkit-appearance: none; /* 使元素看上去像什么, 但没看进去什么成果 */
margin: 10px;
border-radius: 20px;
box-shadow: -5px -5px 20px rgba(255, 255, 255, 0.1),
5px 5px 10px rgba(0, 0, 0, 1),
inset -2px -2px 5px rgba(255, 255, 255, .5),
inset 2px 2px 5px rgba(0,0,0,1),
0 0 2px #f1f1f1;
}
input[type="radio"]:checked { /* 被选中的时候扭转背景色 */
background: #20b7ff;
transition: .5s; /* 应用 transition 过渡, 挪动时会有动画成果 */
}
input[type='radio']::before { /* 应用伪元素设置下层的小按钮 */
content: "";
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 40px;
border-radius: 20px;
transform: scale(0.98, 0.96);
background: linear-gradient(to top, #000,#555);
transition: .5s;
box-shadow: 0 0 1px #232323;
}
input[type='radio']:checked::before{ /* 选中的时候扭转下层按钮的地位 */
left: 40px;
}
input[type='radio']::after{
content: "";
position: absolute;
left: 65px;
width: 4px;
height: 4px;
top: calc(50% - 2px);
background: #555;
border-radius: 50%;
transition: .5s;
}
input[type='radio']:checked::after{ /* 应用伪元素设置小圆点 */
left: calc(65px + 40px);
background: #63cdff;
box-shadow: 0 0 5px #63cdff,0 0 15px #63cdff,0 0 30px #63cdff;
}
</style>
</head>
<body>
<label for=""><input type="radio"name='btn'></label>
<label for=""><input type="radio"name='btn'></label>
</body>
</html>
正文完
