颤动切换按钮示例

简介

颤动切换按钮是一种常用的 UI 控件，它可以让用户通过单击按钮来切换两种状态之间的切换。在本示例中，我们将通过 CSS 和 JavaScript 来实现一个颤动切换按钮，以便在您的 Web 应用程序中使用。

示例代码

下面是一个基本的 HTML 结构，包含两个按钮：

<button id="button1">状态 1</button>
<button id="button2">状态 2</button>

接下来，我们将使用 CSS 样式来创建按钮的初始外观：

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

这个样式定义了按钮的所有基本特征，包括颜色、字体大小和边框半径等。接下来我们将通过 JavaScript 来切换按钮的状态。

// 获取按钮元素
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');

// 切换按钮的状态
button1.addEventListener('click', function() {
  button1.classList.add('shake');
  button2.classList.remove('shake');
});

button2.addEventListener('click', function() {
  button1.classList.remove('shake');
  button2.classList.add('shake');
});

上面的代码使用了 classList 属性来添加或删除每个按钮的 shake 类，这个类是一个 CSS 定义的一些动画样式，可以让按钮在两个状态之间颤动。

最后，我们将定义 shake 类的 CSS 样式：

.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  60% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  100% { transform: translate(0, 0); }
}

上面的代码定义了一个动画效果，它会让按钮在四个方向上颤动。我们将这个动画效果分成了六个阶段，分别在 0%、20%、40%、60%、80% 和 100% 时改变按钮的位置。这个动画效果将应用于所有具有 shake 类的按钮。

总结

颤动切换按钮是一种非常有用的 UI 控件，您可以通过这个示例代码来学习如何创建它。本示例展示了如何使用 CSS 和 JavaScript 来切换按钮的状态，并让按钮在两个状态之间颤动。如果您在自己的应用程序中使用这个示例，请注意对代码进行自定义和优化，以满足您的需求。