CSS模拟鼠标跟随器的行为动画效果

terry 2年前 (2023-09-27) 阅读数 66 #数据结构与算法

一般来说，CSS负责性能，JavaScript负责行为。鼠标跟随的效果是行为，通常需要借助JS来实现。

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

原理

以上面的demo为例。使用CSS实现鼠标追踪，最重要的一点是：

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

好吧，其实很多CSS效果都离不开碍眼这几个字。要监控当前鼠标所在的位置，我们只需要用元素覆盖页面即可：

我们使用 100 个元素覆盖整个页面。当您将鼠标悬停时，会出现颜色。核心SCSS代码如下：

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></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)
    }
}
复制代码

可以得到这样的效果：

好吧，如果把每个元素的hover效果去掉，此时操作页面其实是没有任何效果的。但同时，通过伪类:hover，我们可以大致知道当前鼠标在页面的哪个区域。

好，我们继续。让我们在页面中添加另一个元素（一个圆球），并将其绝对放置在页面中间：

<div class="g-ball"></div>
复制代码

.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来看，还有很多错误，比如

精度太差了

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

动作不够流畅

效果看起来不够流畅。这可能需要通过合理的平滑函数和适当的动画延迟来优化。

保持干燥

嗯。现在我们已经掌握了原理，让我们看看使用这种技术还可以创建哪些其他有趣的效果。？复制一下：

CodePen Demo -- 装扮鼠标伴侣

嗯，理想很丰满，现实却很单薄。仅仅使用CSS仍然有很多限制。

但是我们仍然可以使用上面介绍的方法来实现鼠标
使用CSS滤镜filter:blur()contrast()模拟元素融合，具体可以阅读这篇文章：CSS - 我不知道的滤镜技巧和细节

好吧，我们来看看仅使用CSS的破产版本的模拟效果：

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

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

全屏鼠标跟随动画

好啦，下面我们来点更高级的吧。嗯，就是那种花哨的。 :sweat_smile:

如果我们不只检查一个元素而是多个元素。多个元素之间的动画效果设置不同的过渡延迟，以延迟顺序移动。哇，光是想想就令人兴奋。例如：

CodePen 演示 -- 鼠标跟随动画 PURE CSS MAGIC MIX

如果我们能更有想象力，我们可以创造更多的火花：

这个效果是我非常喜欢的一个。日本CodePen作者Yusuke Nakaya的作品，源代码：Demo -- CSS only：水面

鼠标跟随指示

当然，并不一定指示元素的移动。使用div覆盖页面捕获元素当前位置的技术还可以用于其他效果，例如指定鼠标的路径：

默认div覆盖背景的过渡持续时间：0.5 s
悬停到backgrounddiv元素时，将当前悬停div的过渡时长更改为：0s并赋予悬停时的背景颜色，以便当前悬停2的div立即显示
当鼠标离开div时，div的transition-duration切换回默认状态即。 过渡持续时间：0. .同时，背景色消失，因此左侧div的背景色变慢。缓慢过渡到透明，创建鬼影效果

CodePen Demo -- 取消过渡

作者：chokcoco
链接：https://juejin.im/post/5c7f333ce16e51d145 uggets
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。