雀恰营销
专注中国网络营销推广

不可思议的纯 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,能不能复制一下:

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

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

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

好的,让我们看一下破产的纯 CSS 模拟:

不可思议的纯 CSS 实现鼠标跟随效果_背景色_05

p>

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

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

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

全屏鼠标跟随动画

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

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

​​​​

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

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

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

这个效果对我来说很不错我喜欢日本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​​​,持续更新中。欢迎点击星号订阅合集。

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

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

赞(0) 打赏
未经允许不得转载:雀恰营销 » 不可思议的纯 CSS 实现鼠标跟随效果
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

文章对你有帮助就赞助我一下吧

支付宝扫一扫打赏

微信扫一扫打赏