边框颤动

边框颤动是指当鼠标移动到一个元素的边框上时，边框出现颤动效果。

这种效果通常用于提醒用户，当前操作的元素是可交互的。

实现方式

CSS 边框动画

可以使用 CSS 的 @keyframes 规则和 animation 属性来实现边框颤动效果。

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-4px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.example {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

JavaScript 实现

使用 JavaScript 来实现边框颤动效果，可以通过设置元素的 border-color 和 box-shadow 属性来实现。

var element = document.getElementById('example');

element.addEventListener('mouseenter', function() {
  this.style.borderColor = 'red';
  this.style.boxShadow = '0 0 10px red';
});

element.addEventListener('mouseleave', function() {
  this.style.borderColor = '';
  this.style.boxShadow = '';
});

总结

边框颤动效果是一种良好的用户提示，可以更加清晰地告诉用户当前操作的元素。实现方式多种多样，选择合适的方式来实现即可。