不可思议的纯CSS实现鼠标跟随效果
时间：2023-03-31 12:37:32
CSS
直接进入正题，鼠标跟随，顾名思义就是元素会跟随鼠标的移动，做出相应的动作。大概是这样的：一般来说，CSS是用来表现的，JavaScript是用来表现行为的。跟随鼠标的效果是一种行为，通常需要JS来实现。当然，本文的重点是介绍如何在不借助JS的情况下，使用CSS模拟实现一些鼠标跟随行为的动画效果。原理以上面的demo为例。使用CSS实现鼠标跟踪，最重要的一点是：如何实时监控当前鼠标的位置？OK，其实很多CSS效果都离不开“蒙眼”二字。要监听鼠标当前在什么位置，我们只需要用元素填充页面：我们用100个元素填充整个页面，悬停时显示颜色。SCSS核心代码如下：
...//100个
.g-container{position:relative;宽度：100vw；高度：100vh；}.position{位置：绝对；宽度：10vw；height:10vh;}@for$i从0到100{$x:$i%10;$y:($i-$x)/10;.position:nth-child(#{$i+1}){top:#{$y*10}vh;左：#{$x*10}vw；}.position:nth-child(#{$i+1}):hover{background:rgba(255,155,10,.5)}}可以得到这样的效果：元素，那么此时操作页面其实是没有效果的。但同时，通过:hover伪类，我们可以大致知道当前鼠标在页面的哪个区域。让我们继续，让我们在页面中添加另一个元素（圆球）并将其绝对定位在页面中间：
.ball{position:absolute;顶部：50%；左：50%；宽度：10vmax；高度：10vmax；边界半径：50%；transform:translate(-50%,-50%);}最后，我们使用~兄弟元素选择器悬停页面（实际上悬停了一百个隐藏的div），通过当前悬停的div来控制球元素的位置。@for$i从0到100{$x:$i%10;$y:($i-$x)/10;.position:nth-child(#{$i+1}):hover~.ball{top:#{$y*10}vh;左：#{$x*10}vw；}}至此就实现了一个简单的纯CSS实现鼠标跟随效果，方便大家理解。看下图图片清晰：完整的DEMO，可以戳这里看：CodePenDemo--CSS实现鼠标跟随的问题precision，它只能控制元素移动到div所在的空间，而不能控制鼠标的精确位置，为此，我们可以通过增加隐藏div的数量来优化。例如，从100个平铺div到1000个平铺div。动作不够丝滑，效果看起来也不够丝滑。这可能需要通过合理的缓动函数和适当的动画延迟来优化。擦干，嗯。掌握了原理之后，我们就来看看使用这个技巧可以做出哪些有趣的效果。CSS鼠标跟随按钮启动的效果，我在CodePen上看到如下效果，使用SVG+CSS+JS实现，心想，直接用CSS，能不能复制一下：CodePenDemo--Gooeymousefollow,Idealis丰满，现实很骨感。仅使用CSS，仍有许多限制。但是我们仍然可以使用上面提到的方法来实现鼠标跟踪，使用CSSfilterfilter:blur()contrast()来模拟元素融合。详情请参考这篇文章：你所不知道的CSS滤镜技巧与细节。好，看一下只用CSS的破产版模拟效果：有点太奇怪了，可以稍微收敛一下效果，通过调整颜色，滤镜强度（也就是各种尝试。。。），得到类似效果稍微好点：Demo戳我，CodePenDemo--CSS鼠标跟随按钮效果全屏鼠标跟随动画OK，继续，我们来做点更炫的吧。好吧，那种浮华。如果我们控制的不止一个元素，而是多个元素。对于多个元素之间的动画效果，设置不同的transition-delay来依次延迟移动。哇，光是想想就令人兴奋。例如：CodePenDemo--鼠标跟随动画PURECSSMAGICMIX如果我们能更富想象力，那么我们就能碰撞出更多火花：这个效果是我很喜欢的日本CodePen作者YusukeNakaya的作品。源代码：Demo--OnlyCSS:WaterSurfaceMouseFollowIndicator当然，不一定要指示元素移动。使用div覆盖页面捕捉元素当前位置的技巧也可以用在其他效果上，比如指示鼠标移动轨迹：默认transition-durationofthebackground-covereddiv:0.5swhenhoverto元素背景div，将当前悬停的div的transition-duration改为：0s，并赋予悬停时的背景色，使得当前悬停的div在鼠标离开div时立即显示，并且div的transition-duration会恢复到默认状态，即transition-duration:0.5s，同时背景色消失，这样左边div的背景色会逐渐过渡到透明，造成ghosteffectCodePenDemo--canceltransition最后其实还有很多有趣的用法，有兴趣的同学可以自己动手，多尝试，结合。经常有人问我，这些奇怪的用法能用在实际业务中吗？有用没用。嗯，我的看法是，也许真的用不到业务上或者应用场景极其有限，但是知道的多了，遇到问题的时候可以选择的多一些，思考的空间多一些，发散思维也好一些，至少无害。更多你可能想不到的有趣CSS，可以来这里看看：CSS-Inspiration--CSSInspiration更多精彩CSS技术文章汇总在我的Github--iCSS，持续更新。欢迎点个星订阅收藏。好了，本文到此结束，希望对大家有所帮助：）有什么问题或者建议可以多交流，原创文章，文笔有限，知识匮乏，如有不妥之处，敬请谅解！文章，请告诉我。
