CSS鼠标跟随的原理

<div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  ... // 100个

</div>

.g-container {

    position: relative;

    width: 100vw;

    height: 100vh;

}

.position {

    position: absolute;

    width: 10vw;

    height: 10vh;

}

@for $i from 0 through 100 {

    $x: $i % 10;

    $y: ($i - $x) / 10;

    .position:nth-child(#{$i + 1}) {

        top: #{$y * 10}vh;

        left: #{$x * 10}vw;

    }

    .position:nth-child(#{$i + 1}):hover {

        background: rgba(255, 155, 10, .5)

    }

}