温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS实现鼠标跟随效果

发布时间:2020-07-01 14:13:28 来源:亿速云 阅读:733 作者:Leah 栏目:web开发

本篇文章给大家分享的是有关CSS实现鼠标跟随效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

我们先来看看鼠标跟随效果是什么样的:

CSS实现鼠标跟随效果

原理

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

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

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

我们使用 100 个元素,将整个页面铺满,hover 的时,展示颜色,核心 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)
    }
}

可以得到这样的效果:

CSS实现鼠标跟随效果

好的,如果把每个元素的 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%);
}

最后,我们借助 ~ 兄弟元素选择器,在 hover 页面的时候(其实是 hover 一百个隐藏的 div),通过当前 hover 到的 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 实现鼠标跟随的效果就实现了,方便大家理解,看看下面这张图就明白了:

CSS实现鼠标跟随效果

完整的DEMO,你可以戳这里看看:CodePen Demo -- CSS实现鼠标跟随

存在的问题

就上面的 Demo 来看,还是有很多瑕疵的,譬如

精度太差

只能控制元素运动到 div 所在空间,而不是精确的鼠标所在位置,针对这一点,我们可以通过增加隐藏的 div 的数量来优化。譬如将 100 个平铺 div 增加到 1000 个平铺 div。

运动不够丝滑

效果看起来不够丝滑,这个可能需要通过合理的缓动函数,适当的动画延时来优化。

燥起来吧

嗯。原理掌握了,下面我们来看看,使用这个技巧还能鼓捣出什么有意思的效果。

CSS鼠标跟随按钮效果

一开始,我在 CodePen 上看到了下面这个效果,使用了 SVG + CSS + JS 实现,我就想着,仅用 CSS,能不能 copy 一下:

CSS实现鼠标跟随效果

CodePen Demo -- Gooey mouse follow

好吧,理想很丰满,现实很骨感。仅仅使用 CSS,还是有诸多限制。

  • 但是我们还是可以使用上述介绍的方法实现鼠标跟随

  • 利用 CSS 滤镜 filter: blur() contrast() 模拟元素融合,具体可以看看这篇文章:你所不知道的 CSS 滤镜技巧与细节

好,看看仅仅使用 CSS 的破产版模拟效果:

CSS实现鼠标跟随效果

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

CSS实现鼠标跟随效果

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

全屏鼠标跟随动画

OK,继续,下面来点更炫的。嗯,就是那种华而不实的。sweat_smile

如果我们控制的不止一个元素,而是多个元素。多个元素之间的动画效果再设定不同的 transition-delay ,顺序延迟运动。哇哦,想想就很激动。譬如这样:

CSS实现鼠标跟随效果

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

如果我们能更有想象力一点,那么可以再碰撞出多一点的火花:

CSS实现鼠标跟随效果

这个效果是我非常喜欢的一位日本 CodePen 作者 Yusuke Nakaya 的作品,源代码: Demo -- Only CSS: Water Surface

鼠标跟随指示

当然,不一定要指示元素运动。使用 div 铺满页面捕捉元素当前位置的技巧,还可以运用在其他一些效果上,譬如指示出鼠标运动轨迹:

CSS实现鼠标跟随效果

1、默认的铺满背景的 div 的 transition-duration: 0.5s

2、当 hover 到元素背景 div 的时候,改变当前 hover 到的 div 的 transition-duration: 0s,并且 hover 的时候赋予背景色,这样当前 hover 到的 div 会立即展示

3、当鼠标离开 div,div 的 transition-duration 变回默认状态,也就是 transition-duration: 0.5s,同时背景色消失,这样被离开的 div 的背景色将慢慢过渡到透明,造成虚影的效果

CodePen Demo -- cancle transition

以上就是CSS实现鼠标跟随效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI