<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收音机按钮 :checked, :indeterminate</title>
    <style>
      body {
        font-family: sans-serif;
      }

      input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
      }

      input[type="radio"] {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px solid gray;
        /* 调整单选框文字位置 */
        vertical-align: -2px;
        outline: none;
      }

      input[type="radio"]::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        border-radius: 6px;
        background-color: red;
        font-size: 1.2em;
        transform: translate(3px, 3px) scale(0);
        transform-origin: center;
        transition: all 0.3s ease-in;
      }

      input[type="radio"]:checked::before {
        transform: translate(3px, 3px) scale(1);
        transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
      }

      input[type="radio"]:indeterminate {
        border: 2px solid red;
        animation: 0.4s linear infinite alternate border-pulse;
      }

      @keyframes border-pulse {
        from {
          border: 2px solid red;
        }

        to {
          border: 6px solid red;
        }
      }
    </style>
</head>

<body>
  <form>
    <fieldset>
      <legend>选择你最喜欢的苹果</legend>

<p>
  <input type="radio" name="fruit" value="cherry" id="cherry">
  <label for="cherry">樱桃</label>
  <span></span>
</p>
      <p>
        <input type="radio" name="fruit" value="banana" id="banana">
        <label for="banana">香蕉</label>
        <span></span>
      </p>
      <p>
        <input type="radio" name="fruit" value="strawberry" id="strawberry">
        <label for="strawberry">草莓</label>
        <span></span>
      </p>
    </fieldset>
  </form>
</body>

</html>
