代码来自头条号"前端小智", 侵权删

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