景色跟随鼠标移动效果CSS实现

Web阿成

于 2023-08-26 12:06:39 发布

阅读量312

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/a_strong_pig/article/details/132510040

版权

下图这个效果如何实现呢？鼠标移动带动背景景色移动？

让我们看看大神的代码嘿嘿

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    html {
      overflow-x: hidden;
    }
    html,
    body {
      padding: 0;
      margin: 0;
    }
    .totalcontainer {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    .container1 {
      transform: scaleX(1.11);
    }
    .container2 {
      transform: scaleX(1.25);
    }
    .layer-1 {
      height: 100vh;
      width: 100%;
      background-color: #fed8c1;
    }

    .layer-2 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay2.svg")
        no-repeat center center fixed;
      animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .layer-3 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay3.svg")
        no-repeat center center fixed;
      animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s
        both;
    }
    .layer-4 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay4.svg")
        no-repeat center center fixed;
      animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s
        both;
    }
    .layer-5 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay5.svg")
        no-repeat center center fixed;
      animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s
        both;
    }
    .layer-6 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453881/codepen/lay6.svg")
        no-repeat center center fixed;
      animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s
        both;
    }
    .layer-7 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453881/codepen/lay7.svg")
        no-repeat center center fixed;
      animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.85s
        both;
    }
    .layer-8 {
      background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453882/codepen/lay8.svg")
        no-repeat center center fixed;
      animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s
        both;
    }
    .laya-please {
      position: absolute;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height: 100vh;
      width: 100%;
      top: 0;
      left: 0px;
    }

    @-webkit-keyframes slide-in-bottom {
      0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes slide-in-bottom {
      0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes slide-in-top {
      0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
      }

      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }
  </style>
  <body>
    <!-- 图层分块 -->
    <div class="totalcontainer">
      <div class="laya-please layer-1"></div>
      <div class="laya-please layer-2"></div>
      <div class="container1">
        <div class="laya-please layer-3"></div>
        <div class="laya-please layer-4"></div>
        <div class="laya-please layer-5"></div>
        <div class="laya-please layer-6"></div>
      </div>
      <div class="container2">
        <div class="laya-please layer-7"></div>
        <div class="laya-please layer-8"></div>
      </div>
    </div>
    <script>
      // 获取图层元素和相关图层
      const elems = document.querySelectorAll(".laya-please");
      const layer2 = document.querySelector(".layer-2");
      const layer3 = document.querySelector(".layer-3");
      const layer4 = document.querySelector(".layer-4");
      const layer5 = document.querySelector(".layer-5");
      const layer6 = document.querySelector(".layer-6");
      const layer7 = document.querySelector(".layer-7");
      const layer8 = document.querySelector(".layer-8");

      // 在一段时间后移除所有动画
      setTimeout(function () {
        elems.forEach(function (elem, index) {
          elem.style.animation = "none";
        });
      }, 1500);

      // 当鼠标移动时的交互效果
      document.body.addEventListener("mousemove", function (e) {
        // 如果尚未触发交互效果
        if (!e.currentTarget.dataset.triggered) {
          // 重置所有图层的位置和动画
          elems.forEach(function (elem, index) {
            if (elem.getAttribute("style")) {
              elem.style.transition = "all .5s";
              elem.style.transform = "none";
            }
          });
        }
        e.currentTarget.dataset.triggered = true;

        // 计算移动的距离和速度
        let width = window.innerWidth / 2;
        let mouseMoved2 = (width - e.pageX) / 50;
        let mouseMoved3 = (width - e.pageX) / 40;
        let mouseMoved4 = (width - e.pageX) / 30;
        let mouseMoved5 = (width - e.pageX) / 20;
        let mouseMoved6 = (width - e.pageX) / 10;
        let mouseMoved7 = (width - e.pageX) / 5;

        // 应用图层的平移变换
        layer3.style.transform = "translateX(" + mouseMoved2 + "px)";
        layer4.style.transform = "translateX(" + mouseMoved3 + "px)";
        layer5.style.transform = "translateX(" + mouseMoved4 + "px)";
        layer6.style.transform = "translateX(" + mouseMoved5 + "px)";
        layer7.style.transform = "translateX(" + mouseMoved6 + "px)";
        layer8.style.transform = "translateX(" + mouseMoved7 + "px)";
      });

      // 当鼠标离开时重置图层位置
      document.body.addEventListener("mouseleave", function (e) {
        elems.forEach(function (elem, index) {
          elem.style.transition = "all .5s";
          elem.style.transform = "none";
        });
      });

      // 当鼠标进入时禁用过渡动画
      document.body.addEventListener("mouseenter", function (e) {
        elems.forEach(function (elem, index) {
          setTimeout(function () {
            elem.style.transition = "none";
          }, 500);
        });
      });
    </script>
  </body>
</html>

相信走在前端的道路上，我们也一定会实现，也一定能实现各种复杂的css动画效果。