JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="container"></div>

CSS

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 500px;
  height: 600px;
  background-image: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img克鲁赛德战记－Ａ.jpg");
  background-repeat: no-repeat;
  background-position: 50% 30%;
  border: 4px solid #000;
}

JavaScript

// https://css-tricks.com/moving-backgrounds/

var container = document.querySelector(".container")

container.addEventListener("mousemove", function (e) {
  var rect = container.getBoundingClientRect()

  // 获取鼠标在容器内的相对位置
  var x = e.clientX - rect.left
  var y = e.clientY - rect.top

  // 计算相对移动量
  var moveX = (x / rect.width - 0.5) * 2 // -1 到 1 之间的值
  var moveY = (y / rect.height - 0.5) * 2 // -1 到 1 之间的值

  // 根据比例调整背景位置，初始位置为 50% 30%
  var backgroundX = 50 + moveX * 20 // 调整 20 可以控制水平移动的敏感度
  var backgroundY = 30 + moveY * 15 // 调整 15 可以控制垂直移动的敏感度

  container.style.backgroundPosition = backgroundX + "% " + backgroundY + "%"
})

container.addEventListener("mouseleave", function () {
  container.style.backgroundPosition = "50% 30%" // 恢复到初始位置
})