藥丸按鈕

時間 2021-06-18

標籤 html 前端 web app flex 動畫 spa code orm 欄目 HTML 简体版

原文原文鏈接

代碼來自頭條號"前端小智", 侵權刪
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。