css3 跟随鼠标反方向移动

CSS3 中有一种很有趣的特效，那就是让元素随着鼠标移动而反方向移动。这种特效可以为网页增添趣味，增强用户的互动体验。

首先，我们需要在 CSS 中声明一个鼠标移动效果的类，在这个类的样式中，我们需要声明使用绝对定位，同时设置 left 和 top 的值为 50%，这样就可以使元素始终保持在屏幕中心。

.mouse-move {
    position: absolute;
    left: 50%;
    top: 50%;
}

接下来我们需要使用 JavaScript 来实现鼠标移动效果。在代码中，我们需要先获取鼠标当前的位置，然后对需要移动的元素的位置进行计算，从而实现元素跟随鼠标反方向移动的效果。

document.addEventListener('mousemove', function (e) {
    const moveX = (e.clientX - window.innerWidth / 2) / 5;
    const moveY = (e.clientY - window.innerHeight / 2) / 5;
    const moveEl = document.querySelector('.mouse-move');
moveEl.style.transform = `translate(${
-moveX}
px, ${
-moveY}
    px)`;
}
    );
    

这段 JS 代码中主要是监听了鼠标的移动事件，然后通过获取鼠标距离屏幕中心的距离，得到需要移动的距离，并将其赋值给元素的 transform 属性上，从而实现元素跟随鼠标反方向移动的效果。

最后，我们只需要在 HTML 中引用这个类，就可以为元素添加鼠标移动特效了。

div class="mouse-move">
    跟随鼠标移动的元素/div>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！