如何在图像上暂停鼠标悬停时的动画

在图像上暂停鼠标悬停时的动画可以通过以下步骤实现：

使用HTML和CSS创建一个包含动画效果的图像元素。可以使用CSS的@keyframes规则定义动画效果，然后将其应用于图像元素。
使用JavaScript监听鼠标悬停事件。可以使用addEventListener方法将mouseover和mouseout事件绑定到图像元素上。
在鼠标悬停事件的处理函数中，使用JavaScript控制动画的播放和暂停。可以通过添加或删除CSS类来启用或禁用动画效果。

以下是一个示例代码：

HTML:

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

CSS:

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  animation: animateImage 1s infinite;
}

@keyframes animateImage {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.paused {
  animation-play-state: paused;
}

JavaScript:

const imageContainer = document.querySelector('.image-container');
const image = imageContainer.querySelector('img');

imageContainer.addEventListener('mouseover', () => {
  image.classList.add('paused');
});

imageContainer.addEventListener('mouseout', () => {
  image.classList.remove('paused');
});

这段代码创建了一个包含动画效果的图像元素，并在鼠标悬停时暂停动画。你可以根据需要修改动画效果和图像元素的样式。

腾讯云相关产品和产品介绍链接地址：