js鼠标悬停显示圆圈动画特效

<div class="circle-container">
  Hover Me!
</div>

.circle-container {
  position: relative;
  display: inline-block;
  padding: 20px;
  font-size: 20px;
  cursor: pointer;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 123, 255, 0.3);
  transform: scale(0);
  transition: transform 0.5s ease;
}

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.circle-container');

  container.addEventListener('mouseenter', function() {
    const circle = document.createElement('div');
    circle.classList.add('circle');
    container.appendChild(circle);
    setTimeout(() => {
      circle.style.transform = 'scale(2)';
    }, 10);
  });

  container.addEventListener('mouseleave', function() {
    const circle = container.querySelector('.circle');
    if (circle) {
      circle.remove();
    }
  });
});

.circle {
  will-change: transform;
}

container.addEventListener('touchstart', function() {
  // 触发圆圈动画的代码
});

container.addEventListener('touchend', function() {
  // 移除圆圈动画的代码
});