颤动单选按钮组

颤动单选按钮组是一种被广泛应用于Web开发中的UI组件，特别是在需要提供用户一组选项以供选择的场景中，如问卷调查、表单、设置页面等。通常情况下，单选按钮的状态是静态的，即用户点击后，它所表示的选项就被选中。但有时候，为了增强用户的视觉反馈，我们需要在单选按钮上加入颤动动画效果，让用户感知到自己正在作出选择。这就是颤动单选按钮组的作用。

技术实现

要实现颤动单选按钮组，需要利用CSS3的动画效果和JavaScript的事件交互功能。具体来说，我们可以通过以下步骤实现该组件：

1. HTML结构

   首先，我们需要在HTML中创建一组单选按钮。可以使用<input type="radio">元素来创建单选按钮，然后使用<label>元素来关联按钮和标签文字。如下所示：

   <div class="radio-group">
     <input type="radio" id="option1" name="options" value="option1">
     <label for="option1">Option 1</label>
     <br>
     <input type="radio" id="option2" name="options" value="option2">
     <label for="option2">Option 2</label>
     <br>
     <input type="radio" id="option3" name="options" value="option3">
     <label for="option3">Option 3</label>
   </div>
   

2. CSS样式

   接下来，我们给单选按钮组添加样式。具体来说，我们需要实现以下功能：

   • 隐藏原生单选按钮样式
   • 将自定义的样式应用到单选按钮和标签上
   • 定义动画效果

   为了实现以上功能，我们可以使用如下的CSS代码：

   .radio-group label {
     display: inline-block;
     position: relative;
     padding-left: 30px;
     margin-right: 15px;
     margin-bottom: 10px;
     cursor: pointer;
     font-size: 16px;
     user-select: none;
   }
   
   .radio-group input[type="radio"] {
     position: absolute;
     opacity: 0;
     cursor: pointer;
   }
   
   .radio-group input[type="radio"]:checked + label:before {
     animation: shake 0.3s ease-in-out;
   }
   
   .radio-group input[type="radio"]:checked + label:after {
     transform: scale(1.2);
     border-color: #007bff;
   }
   
   .radio-group input[type="radio"]:focus + label:before {
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
   }
   
   @keyframes shake {
     0% {
       transform: translateX(0);
     }
     25% {
       transform: translateX(-5px);
     }
     75% {
       transform: translateX(5px);
     }
     100% {
       transform: translateX(0);
     }
   }
   
   .radio-group label:before {
     content: "";
     display: inline-block;
     position: absolute;
     left: 0;
     bottom: 1px;
     width: 20px;
     height: 20px;
     border: 2px solid #999999;
     border-radius: 50%;
     transition: border-color 0.2s ease-in-out;
   }
   
   .radio-group label:after {
     content: "";
     display: inline-block;
     position: absolute;
     left: 3px;
     bottom: 4px;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     transition: all 0.2s ease-in-out;
   }
   

   上述代码实现了隐藏原生单选按钮样式、添加自定义样式、定义动画效果等多个功能。其中，shake动画效果是一个缓动函数，实现了颤动的效果。

3. JavaScript交互

   最后，我们需要通过JavaScript代码实现单选按钮的选中状态变更。具体来说，我们需要通过事件监听来检测单选按钮的状态变化，并在变化发生时修改相应的CSS样式。代码示例如下：

   const radioButtons = document.querySelectorAll(".radio-group input[type='radio']");
   
   radioButtons.forEach((button) => {
     button.addEventListener("change", () => {
       radioButtons.forEach((btn) => {
         const label = btn.nextElementSibling;
         label.classList.remove("checked");
         label.querySelector("input[type='radio']").checked = false;
       });
   
       const label = button.nextElementSibling;
       label.classList.add("checked");
       label.querySelector("input[type='radio']").checked = true;
     });
   });
   

   上述代码实现了通过事件监听来检测单选按钮的状态变化，并在变化发生时修改相应的CSS样式。

使用方法

要使用颤动单选按钮组，只需将以上的HTML、CSS和JavaScript代码复制到自己的项目中即可。然后，将HTML中的选项文本修改为自己的内容即可。

注：以上代码中的动画效果需要在Chrome、Firefox、Safari等现代浏览器中才能正常显示。

效果预览

最后，附上颤动单选按钮组的效果预览。

代码片段：

````html
<div class="radio-group">
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">Option 1</label>
  <br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">Option 2</label>
  <br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">Option 3</label>
</div>

````css
.radio-group label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-right: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-group input[type="radio"]:checked + label:before {
  animation: shake 0.3s ease-in-out;
}

.radio-group input[type="radio"]:checked + label:after {
  transform: scale(1.2);
  border-color: #007bff;
}

.radio-group input[type="radio"]:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

.radio-group label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 20px;
  height: 20px;
  border: 2px solid #999999;
  border-radius: 50%;
  transition: border-color 0.2s ease-in-out;
}

.radio-group label:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 3px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

````javascript
const radioButtons = document.querySelectorAll(".radio-group input[type='radio']");

radioButtons.forEach((button) => {
  button.addEventListener("change", () => {
    radioButtons.forEach((btn) => {
      const label = btn.nextElementSibling;
      label.classList.remove("checked");
      label.querySelector("input[type='radio']").checked = false;
    });

    const label = button.nextElementSibling;
    label.classList.add("checked");
    label.querySelector("input[type='radio']").checked = true;
  });
});