代码来自头条号"前端小智", 侵权删
<!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>