下拉按钮图标删除颤动

在网页或移动应用的设计中，下拉按钮图标是非常常见的元素之一。它通常用于展示下拉菜单或下拉选项等。当点击下拉按钮图标时，我们通常会看到一个下拉框，当然，在有些情况下我们也需要一个删除按钮来清除已选择的选项。

这里我们讨论的是当我们点击删除按钮时，图标产生颤抖效果的实现。

实现方式

HTML 结构

我们从 HTML 结构开始。在下拉框中添加一个删除按钮，并将其隐藏。

<div class="dropdown">
  <button class="dropbtn"><i class="fa fa-caret-down"></i></button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
    <button class="delete-btn"><i class="fa fa-times"></i></button>
  </div>
</div>

CSS 样式

接着，我们为删除按钮添加样式，并使其可见。

.delete-btn {
  display: none;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}

.delete-btn i {
  color: #ccc;
  transition: transform .2s;
}

当然，样式可以根据实际需要进行调整。

JavaScript 动画

最后，我们使用 JavaScript 实现图标颤抖的动画效果。

const deleteBtn = document.querySelector('.delete-btn');
const icon = deleteBtn.querySelector('i');

deleteBtn.addEventListener('mouseover', function() {
  icon.style.transform = 'rotate(15deg)';
});

deleteBtn.addEventListener('mouseout', function() {
  icon.style.transform = 'rotate(0deg)';
});

当鼠标经过删除按钮时，我们使图标绕 $15^\circ$ 旋转；当鼠标移出时，则使图标回到原始角度即 $0^\circ$。

最终效果如下所示：

总结

我们通过 HTML、CSS 和 JavaScript 简单地实现了下拉按钮图标删除颤动的效果，这种效果能够在一定程度上提高用户体验和交互性。开发者可以在实际使用中进行优化和改进。