css3图片跟随鼠标移动 代码示例

CSS3图片跟随鼠标移动是一种很有趣的效果，可以为网页增加一些互动性和动态感。通过使用CSS3的transform属性和鼠标事件，我们可以实现这样的效果。

我们需要创建一个包含图片的HTML元素，比如一个div，然后给它设置一个背景图片。

<div class="42fb-e834-a95d-de29 image"></div>

接下来，我们可以使用CSS3的transform属性来实现图片的移动。我们可以使用translate()函数来指定图片在水平和垂直方向上的偏移量。

.image {
  background-image: url('image.jpg');
  width: 200px;
  height: 200px;
  transition: transform 0.3s ease;
}
.image:hover {
  transform: translate(20px, 20px);
}

在上面的示例代码中，我们给图片的div元素添加了一个:hover伪类，当鼠标悬停在图片上时，会触发transform属性的变化，使图片在水平和垂直方向上移动20px。

这里的关键是使用了transition属性来实现平滑的过渡效果。通过指定transform属性在0.3秒内的变化，我们可以让图片的移动看起来更加流畅。

除了使用:hover伪类，我们还可以使用JavaScript来实现更复杂的效果。例如，我们可以使用鼠标移动事件来控制图片的移动方向和速度。

var image = document.querySelector('.image');
image.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;
  image.style.transform = 'translate(' + mouseX + 'px, ' + mouseY + 'px)';
});

在上面的示例代码中，我们通过监听鼠标移动事件，获取鼠标的位置坐标，并将它们作为translate()函数的参数，从而实现图片跟随鼠标移动的效果。

通过这些示例代码，我们可以看到如何使用CSS3和JavaScript来实现图片跟随鼠标移动的效果。这种效果可以为网页增添一些动态和互动的元素，使用户的体验更加丰富。