CSS3简单实现伪3D，分层级图片跟随鼠标移动而移动

灰太狼 2023-06-08 03:17 8阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #81ff9d;
            position: absolute;
            z-index: 2;
            left: 0;
            right: 0;
            margin: 0 auto;
            margin-top: 150px;
            
        }
    
        .box2 {
            width: 200px;
            height: 200px;
            background-color: #bfaeff;
            position: absolute;
            z-index: 1;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            margin-top: 100px;
        }
    
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    
    </style>
    <body onmousemove="mousemove(event)" onmouseenter="enter(event)">
    <div class="box1">
        1
    </div>
    <div class="box2">
        2
    </div>
    </body>
    </html>
    <script>
      var box1 = document.getElementsByClassName("box1")[0]
      var box2 = document.getElementsByClassName("box2")[0]
    
      var ScaleX, ScaleY
      var startx, starty
    
      function enter(e) {
        startx = e.clientX
        starty = e.clientY
      }
    
      function mousemove(e) {
        ScaleX =  e.clientX - startx
        ScaleY =  e.clientY - starty
    
        box1.style.left = ScaleX/100 +"px"
        box1.style.top = ScaleY/100 + "px"
    
        box2.style.left = ScaleX/30 +"px"
        box2.style.top = ScaleY/30 + "px"
      }
    
    
    
    </script>