页面随着鼠标进行偏移

效果：

(https://cdn.nlark.com/yuque/0/2022/gif/32647592/1670400699242-8327115c-94d7-4e8f-b07b-c08aea0f946c.gif#averageHue=%23807924&clientId=udbb540c9-c6a0-4&crop=0&crop=0&crop=1&crop=1&from=drop&id=u01e44af5&margin=[object Object]&name=录屏_选择区域_20221207160200.gif&originHeight=848&originWidth=1206&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2502065&status=done&style=none&taskId=ua80f01e7-93f8-41b9-805e-18f4d59044a&title=)

<div id="gallery">
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjF8fHJhbmRvbSUyMG9iamVjdHN8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1515266591878-f93e32bc5937?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGJsdWV8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1587590227264-0ac64ce63ce8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cmFuZG9tJTIwb2JqZWN0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1520121401995-928cd50d4e27?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Z3JlZW58ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1511447333015-45b65e60f6d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cHVycGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1557800636-894a64c1696f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8b3JhbmdlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1520338258525-606b90f95b04?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGRhcmslMjBibHVlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1521127474489-d524412fd439?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTh8fHJhbmRvbSUyMG9iamVjdHN8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=70" />
  </div>
  <div class="tile">
    <img
      src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cmFuZG9tJTIwb2JqZWN0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=70" />
  </div>
</div>


<script>
  const gallery = document.getElementById("gallery");


  window.onmousemove = e => {
    const mouseX = e.clientX,
      mouseY = e.clientY;
    // console.log(mouseX, mouseY);
    const xDecimal = mouseX / window.innerWidth,
      yDecimal = mouseY / window.innerHeight;
    const maxX = gallery.offsetWidth - window.innerWidth,
      maxY = gallery.offsetHeight - window.innerHeight;


    const panX = maxX * xDecimal * -1,
      panY = maxY * yDecimal * -1;


    gallery.animate({
      transform: `translate(${panX}px, ${panY}px)`
    }, {
      duration: 4000,
      fill: "forwards",
      easing: "ease"
    })
  }
</script>
<style>
  body {
    background-color: rgb(10, 10, 10);
    height: 100vh;
    margin: 0px;
    overflow: hidden;
  }


  #gallery {
    height: 140vmax;
    width: 140vmax;
    position: absolute;
  }


  .tile {
    border-radius: 1vmax;
    position: absolute;
    transition: transform 800ms ease;
  }


  .tile:hover {
    transform: scale(1.1);
  }


  .tile:hover>img {
    opacity: 1;
    transform: scale(1.01);
  }


  .tile>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 800ms ease,
      transform 800ms ease;
  }


  .tile:nth-child(1) {
    background-color: rgb(255, 238, 88);
    height: 14%;
    width: 20%;
    left: 5%;
    top: 5%;
  }


  .tile:nth-child(2) {
    background-color: rgb(66, 165, 245);
    height: 24%;
    width: 14%;
    left: 42%;
    top: 12%;
  }


  .tile:nth-child(3) {
    background-color: rgb(239, 83, 80);
    height: 18%;
    width: 16%;
    left: 12%;
    top: 34%;
  }


  .tile:nth-child(4) {
    background-color: rgb(102, 187, 106);
    height: 14%;
    width: 12%;
    left: 45%;
    top: 48%;
  }


  .tile:nth-child(5) {
    background-color: rgb(171, 71, 188);
    height: 16%;
    width: 32%;
    left: 8%;
    top: 70%;
  }


  .tile:nth-child(6) {
    background-color: rgb(255, 167, 38);
    height: 24%;
    width: 24%;
    left: 68%;
    top: 8%;
  }


  .tile:nth-child(7) {
    background-color: rgb(63, 81, 181);
    height: 16%;
    width: 20%;
    left: 50%;
    top: 74%;
  }


  .tile:nth-child(8) {
    background-color: rgb(141, 110, 99);
    height: 24%;
    width: 18%;
    left: 72%;
    top: 42%;
  }


  .tile:nth-child(9) {
    background-color: rgb(250, 250, 250);
    height: 10%;
    width: 8%;
    left: 84%;
    top: 84%;
  }


  /* -- YouTube Link Styles -- */


  body.menu-toggled>.meta-link>span {
    color: rgb(30, 30, 30);
  }


  #source-link {
    bottom: 60px;
  }


  #source-link>i {
    color: rgb(94, 106, 210);
  }


  #yt-link>i {
    color: rgb(239, 83, 80);
  }


  .meta-link {
    align-items: center;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    bottom: 10px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: inline-flex;
    gap: 5px;
    left: 10px;
    padding: 10px 20px;
    position: fixed;
    text-decoration: none;
    transition: background-color 400ms, border-color 400ms;
    z-index: 10000;
  }


  .meta-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }


  .meta-link>i,
  .meta-link>span {
    height: 20px;
    line-height: 20px;
  }


  .meta-link>span {
    color: white;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
  }
</style>