如何自定义开关，使圆圈在颤动中相对较小？

自定义开关，使圆圈在颤动中相对较小，可以通过以下步骤实现：

使用HTML和CSS创建一个开关的基本结构和样式。可以使用<div>元素作为开关的容器，并使用CSS设置其宽度、高度、背景颜色等样式属性。
使用JavaScript监听开关的状态变化。可以通过添加事件监听器来捕获开关的点击事件，并在事件处理函数中执行相应的操作。
在事件处理函数中，使用CSS动画或过渡效果来实现圆圈的颤动效果。可以通过改变圆圈的位置、大小、透明度等属性来创建动画效果。可以使用CSS的@keyframes规则定义关键帧动画，或使用CSS的transition属性实现过渡效果。
调整动画的参数，使圆圈在颤动中相对较小。可以通过改变动画的持续时间、速度、缓动函数等参数来控制圆圈的颤动幅度。可以根据实际需求进行调试和优化。

以下是一个示例代码：

HTML:

<div class="switch">
  <div class="circle"></div>
</div>

CSS:

.switch {
  width: 60px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

.circle {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.5s ease-in-out;
}

.switch.active .circle {
  transform: translateX(30px) translateY(-50%);
}

JavaScript:

const switchElement = document.querySelector('.switch');

switchElement.addEventListener('click', function() {
  switchElement.classList.toggle('active');
});

在上述示例中，通过点击开关，切换.active类的状态，从而触发圆圈的颤动效果。通过调整.circle元素的transform属性，实现圆圈在X轴上的平移动画。可以根据实际需求调整动画的参数，使圆圈在颤动中相对较小。

请注意，以上示例仅为演示目的，实际应用中可能需要根据具体需求进行更复杂的实现。