纯CSS怎样实实际现鼠标追随结果？（代码详解）

发布时间：09/01 来源：未知浏览：关键词：

鼠标追随，望文生义，就是元素会追随着鼠标的挪移而作出响应的运动。平常而言，CSS负责体现，JavaScript负责行为。而鼠标追随这种结果属于行为，要实现平常都需要借助JS。鼠标追随，望文生义，就是元素会追随着鼠标的挪移而作出响应的运动。平常而言，CSS 负责体现，JavaScript 负责行为。而鼠标追随这种结果属于行为，要实现平常都需要借助 JS。

固然，本文的重点，就是介绍怎样在不借助 JS 的状况下运用 CSS 来模拟实现一些鼠标追随的行为动画结果。

我们先来看看鼠标追随结果有哪些样的：

道理

以上面的 Demo 为例子，要运用 CSS 实现鼠标追随，最重要的一点就是：

怎样实时监测到目前鼠标处于何处？

OK，其实许多 CSS 结果，都离不开障眼法二字。要监测到目前鼠标处于何处，我们只需要在页面上铺满元素即可：

我们运用 100 个元素，将整个页面铺满，hover 的时，展现色彩，中心 SCSS 代码如下：

  
  
  
  
  ... // 100个

.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)
    }
}

可以得到这样的结果：

好的，要是把每个元素的 hover 结果去除，那么这个时候操纵页面，其实是没有任何结果的。但同时，通过 :hover 伪类，我们又是可以大约得知目前鼠标是处于页面上哪个区间的。

好继续，我们再给页面增加一个元素（圆形小球），将它绝对定位到页面中间：

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

最后，我们借助 ~ 兄弟元素选中器，在 hover 页面的时候（其实是 hover 一百个隐蔽的 div），通过目前 hover 到的 div，去控制小球元素的位置。

@for $i from 0 through 100{
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

至此，一个简略的纯 CSS 实现鼠标追随的结果就实现了，利便大家了解，看看下面这张图就明确了：

1、默许的铺满配景的 div 的 transition-duration: 0.5s

2、当 hover 到元素配景 div 的时候，转变目前 hover 到的 div 的 transition-duration: 0s，而且 hover 的时候给予配景色，这样目前 hover 到的 div 会立刻展现

3、当鼠标脱离 div，div 的 transition-duration 变回默许状态，也就是 transition-duration: 0.5s，同时配景色消散，这样被脱离的 div 的配景色将渐渐过渡到透亮，造成虚影的结果

CodePen Demo -- cancle transition