药丸按钮

时间 2021-06-18 标签 html 前端 web app flex 动画 spa code orm
代码来自头条号"前端小智", 侵权删
html
<!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>