纯 CSS 实现鼠标跟随效果

                                欢迎微信关注Jerome blog，用技术的心去生活

鼠标跟随效果，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样：

通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。然而，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。

原理

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

如何实时监测到当前鼠标处于何处？

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

我们使用 100 个元素，将整个页面铺满，hover 的时，展示颜色，核心 SCSS 代码如下：

可以得到这样的效果：

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

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

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

至此，一个简单的纯 CSS 实现鼠标跟随的效果就实现了，方便大家理解，看看下面这张图就明白了：

感兴趣的同学可以自己动手，更多的去尝试，组合。