使用anime.js制作按钮悬停动画

<button class="hover-btn">Hover Me!</button>

.hover-btn {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

// 引入 anime.js 库
// <script src="path/to/anime.min.js"></script>

// 创建动画实例
const hoverAnimation = anime({
  targets: '.hover-btn',
  backgroundColor: '#ff6347', // 目标背景颜色
  scale: 1.1, // 目标缩放比例
  duration: 300, // 动画持续时间
  easing: 'easeInOutQuad' // 缓动函数
});

// 监听按钮悬停事件
document.querySelector('.hover-btn').addEventListener('mouseenter', () => {
  hoverAnimation.play(); // 播放动画
});

// 监听按钮离开事件
document.querySelector('.hover-btn').addEventListener('mouseleave', () => {
  hoverAnimation.reverse(); // 反转动画以恢复初始状态
});

const hoverAnimation = anime({
  targets: '.hover-btn',
  backgroundColor: '#ff6347',
  scale: 1.1,
  duration: 300,
  easing: 'easeInOutQuad',
  update: function(anim) {
    // 使用 requestAnimationFrame 优化动画性能
    requestAnimationFrame(() => {
      anim.animatables.forEach(animatable => {
        animatable.target.style.backgroundColor = animatable.currentValue.backgroundColor;
        animatable.target.style.transform = `scale(${animatable.currentValue.scale})`;
      });
    });
  }
});