<style>
    .home-box {
        color: #000;
        width: 100%;
        height: 100%;
        top: -20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        position: relative;
        background-image: radial-gradient(ellipse farthest-corner at 80% 20%,#D0F3FB 5%,#C7D1F3,#FDF1EE,#F7EBF6,#D2C6F1,#F2DDF1,#F3F7F4);
        background-size: 600% 600%;
        animation: gradientBG 15s linear infinite
    }
    
    @keyframes gradientBG {
        0% {
            background-position: 0% 0%
        }
    
        10% {
            background-position: 50% 0%
        }
    
        20% {
            background-position: 75% 0%
        }
    
        30% {
            background-position: 100% 0%
        }
    
        40% {
            background-position: 100% 50%
        }
    
        50% {
            background-position: 100% 100%
        }
    
        60% {
            background-position: 75% 100%
        }
    
        70% {
            background-position: 50% 100%
        }
    
        80% {
            background-position: 0% 100%
        }
    
        90% {
            background-position: 0% 50%
        }
    
        to {
            background-position: 0% 25%
        }
    }
    .home-box .home-content-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10%;
    }
    .home-box .home-content-wrap .home-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .home-box .home-content-wrap .home-content .home-content-left {
        width: 500px;
        height: 100%;
        font-family: PingFang SC;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .home-box .home-content-wrap .home-content .home-content-right {
        width: 500px;
        height: 500px;
        position: relative;
    }
    .home-box .home-content-wrap .home-content .home-content-left .content-title-weight {
        height: 60px;
        background: linear-gradient(135deg, #4866FF, #FF67DD);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 50px;
    }
    .home-box .home-content-wrap .home-content .home-content-left .content-desc {
        font-size: 24px;
        font-weight: 300;
        line-height: 36px;
        letter-spacing: 2.6px;
        text-align: left;
        margin-top: 42px;
        margin-bottom: 77px;
    }
    .home-box .home-content-wrap .home-content .home-content-left .begin-btn {
        color: #fff;
        width: 260px;
        height: 74px;
        line-height: 74px;
        border-radius: 8px;
        padding-left: 110px;
        box-sizing: border-box;
        font-size: 24px;
        font-weight: 500;
        background: linear-gradient(135deg,#4866FF 0%,#FF67DD 100%);
        cursor: pointer;
        position: relative
    }
    
    .home-box .home-content-wrap .home-content .home-content-left .begin-btn:before {
        content: "";
        width: 260px;
        height: 74px;
        display: block;
        border-radius: 50%;
        background-color: #ffffff0d;
        top: 0;
        left: 0;
        position: absolute;
        transform: scale(0);
        transition: all .4s
    }
    
    .home-box .home-content-wrap .home-content .home-content-left .begin-btn:hover:before {
        transform: scale(1)
    }
    .home-box .home-content-wrap .home-content .home-content-left .begin-btn .designer {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 109px;
        width: 81px;
        object-fit: cover;
        transition: .3s;
    }
    .home-box .home-content-wrap .home-content .home-content-left .begin-btn:hover .designer {
        transform: rotate(-30deg);
        transition: .3s;
    }
    .home-box .home-content-wrap .home-content .home-content-right .home-img-l1 {
        z-index: 1;
        background: url(https://qqshow.qq.com/assets/home-img-l1-b077c8d0.png) no-repeat;
        background-size: cover;
    }
    .home-box .home-content-wrap .home-content .home-content-right .home-img-l2 {
        z-index: 2;
        background: url(https://qqshow.qq.com/assets/home-img-l2-79a0d9a5.png) no-repeat;
        background-size: cover;
    }
    .home-box .home-content-wrap .home-content .home-content-right .home-img-l3 {
        z-index: 3;
        background: url(https://qqshow.qq.com/assets/home-img-l3-a6bbb3dc.png) no-repeat;
        background-size: cover;
    }
    .home-box .home-content-wrap .home-content .home-content-right .home-img-content {
        width: 100%;
        height: 100%;
        transition: all .3s;
        right: 0;
        position: absolute;
        z-index: 1;
    }
    </style>
  <div class="home-box">
    <div class="home-content-wrap">
      <div class="home-content">
        <div class="home-content-left">
          <h1 class="content-title-weight">
              子比插件商城
          </h1>
          <p class="content-desc">本网站所有数据及文档均受《著作权法》及相关法律法规保护，任何组织及个人不得侵权，违者本公司将依法追究侵权责任，特此声明。</p>
        <a href="JavaScript:;">
          <div class="begin-btn">
                  了解更多
            <img class="designer" src="https://www.zbtool.cn/wp-content/uploads/2024/08/favicon.png">
          </div>
        </a>
        </div>
        <div class="home-content-right">
          <div class="home-img-content home-img-l1" style="transform: translate(0px, 0px);">
          </div>
          <div class="home-img-content home-img-l2" style="transform: translate(0px, 0px);">
          </div>
          <div class="home-img-content home-img-l3" style="transform: translate(0px, 0px);">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
document.addEventListener("DOMContentLoaded", function() {
  const container = document.querySelector(".home-img-l3");
  const l1 = document.querySelector(".home-img-l1");
  const l2 = document.querySelector(".home-img-l2");
  const l3 = document.querySelector(".home-img-l3");

  container.addEventListener("mousemove", function(e) {
    const containerRect = container.getBoundingClientRect();
    const containerCenterX = containerRect.left + containerRect.width / 2;
    const containerCenterY = containerRect.top + containerRect.height / 2;

    const mouseX = e.clientX;
    const mouseY = e.clientY;

    const offsetX = (mouseX - containerCenterX) * 3;
    const offsetY = (mouseY - containerCenterY) * 3;

    l1.style.transform = `translate(${offsetX / 34}px, ${offsetY / 34}px)`;
    l2.style.transform = `translate(${offsetX / 14}px, ${offsetY / 14}px)`;
    l3.style.transform = `translate(${offsetX / 7}px, ${offsetY / 7}px)`;
  });

  container.addEventListener("mouseleave", function() {
    l1.style.transform = "translate(0, 0)";
    l2.style.transform = "translate(0, 0)";
    l3.style.transform = "translate(0, 0)";
  });
});

</script>