不可思议的纯 CSS 实现鼠标跟随效果

不可思议的纯 CSS 实现鼠标跟随效果

直接进入主题，鼠标跟随，顾名思义，元素会跟随鼠标的移动，做出相应的动作。像这样的：

​

​

一般来说，CSS 负责呈现，JavaScript 负责行为。鼠标跟随的效果是一种行为，一般需要JS来实现。

当然，本文的重点是介绍如何在没有JS的情况下使用CSS来模拟一些鼠标跟随行为动画效果。

原则

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

如何实时监控当前鼠标位置在哪里？

好吧，其实很多CSS效果都离不开蒙眼这个词。要监控当前鼠标在哪里，我们只需要用元素填充页面：

我们用100个元素覆盖整个页面，悬停时，显示颜色，核心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伪类，我们可以大致知道当前鼠标在页面的什么位置。

好的继续，让我们在页面中添加另一个元素（一个小球）并将其绝对定位在页面中间：

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

最后，借助​​​~​​兄弟元素选择器，当悬停页面（实际上是一百个隐藏的div被悬停）时，当前悬停的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实现鼠标跟随的效果就完成了，方便大家理解。看下图就明白了：

​

​

完整的demo鼠标跟随，可以点这里看：​​CodePen Demo–鼠标跟随的CSS实现​​​

存在的问题

从上面的Demo来看，还是有很多缺陷的鼠标跟随，比如

准确率太差

p>

只能控制元素移动到div所在的空间，不能控制鼠标的确切位置。为此，我们可以通过增加隐藏 div 的数量来进行优化。例如将 100 个平铺 div 增加到 1000 个平铺 div。

动作不够流畅

效果看起来不够流畅，这可能需要通过合理的缓动功能和适当的动画延迟进行优化。

晒干

是的。原理掌握了，我们来看看用这个技术可以弄出什么有趣的效果。

CSS鼠标跟随按钮效果

一开始在CodePen上看到如下效果，用SVG + CSS + JS来实现，心想不可思议的纯 CSS 实现鼠标跟随效果，就用CSS，能不能复制一下：

​

​

​​​CodePen Demo — 粘糊糊的鼠标跟随​​​

嗯，理想很丰满，现实很骨感。仅使用 CSS，仍有许多限制。

好的，让我们看一下破产的纯 CSS 模拟：

​

​

p>

有点太奇怪了，可以稍微收敛一下效果。通过调整颜色和滤镜强度（也就是各种尝试……），可以得到稍微好一点的相似效果：

​

​

​​Demo戳我，CodePen Demo——CSS鼠标跟随按钮效果​​

全屏鼠标跟随动画

好的，继续，我们来做点更炫的。嗯，就是那种华而不实的东西。

如果我们控制的元素不止一个，而是多个元素。然后将多个元素之间的动画效果设置为不同的 transition-delay ，并依次延迟运动。哇，想想就让我兴奋。例如：

​​​​

​​​CodePen Demo — 鼠标跟随动画 PURE CSS MAGIC MIX​​

如果我们能多点想象力，那你就可以碰撞出更多的火花：

​

​

这个效果对我来说很不错我喜欢日本CodePen作者Yusuke Nakaya的作品，源代码：​​Demo — Only CSS: Water Surface​​​​

鼠标跟随指令

当然，没有必要指明元素移动。使用 div 填充页面以捕获元素当前位置的技术也可以用于其他效果，例如指示鼠标移动轨迹：

​​​​

div的默认覆盖背景transition-duration：0.5s​​当悬停到元素背景div时，将当前悬停的div的transition-duration：0s更改为，和悬停时赋予背景颜色，这样当前悬停的div会立即显示出来。当鼠标离开div时，div的transition-duration​​​恢复到默认状态，即transition-duration: 0.5s​​，背景色消失。 ，这样被分离的div的背景颜色会慢慢过渡到透明，从而产生鬼影效果

​​CodePen Demo — 取消过渡​​

终于

其实还有很多有趣的用法。有兴趣的同学可以自己动手，多尝试结合。

经常有人问我不可思议的纯 CSS 实现鼠标跟随效果，这些奇怪的用法在实践中有用吗？有用还是没用。嗯，我的看法是，可能真的没有用在业务上，或者应用场景极其有限，但是如果你知道的多一些，遇到问题的时候可以做出更多的选择，有更多的思考空间，有更好的发散性思维，至少无害。

更多你可能没有想到的有趣的 CSS，你可以在这里查看：

​​CSS-Inspiration — CSS灵感​​​

更多精彩的CSS技术文章总结在我的Github–iCSS​​​，持续更新中。欢迎点击星号订阅合集。

好了，本文到此结束，希望对你有所帮助:)

如果您有任何问题或建议，您可以多交流。如果有什么问题，请告诉我。