百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 纯 CSS 怎样实实际现鼠标追随结果?(代码详解)
分享文章到:

纯 CSS 怎样实实际现鼠标追随结果?(代码详解)

发布时间:09/01 来源:未知 浏览: 关键词:
鼠标跟从,望文生义,就是元素会跟从着鼠标的移动而作出响应的运动。平常而言,CSS 负责展现,JavaScript 负责行动。而鼠标跟从这种结果属于行动,要实现平常都需要借助 JS。

当然,本文的重点,就是介绍怎样在不借助 JS 的状况下使用 CSS 来模拟实现一些鼠标跟从的行动动画结果。

我们先来看看鼠标跟从结果是啥样的:

1.gif

道理

以上面的 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)
    }
}

可以得到这样的结果:

2.gif

好的,假如把每个元素的 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 实现鼠标跟从的结果就实现了,利便大家懂得,看看下面这张图就清楚了:

3.gif

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

存在的问题

就上面的 Demo 来看,还是有许多瑕疵的,比如

精度太差

只能操纵元素运动到 div 所在空间,而不是准确的鼠标所在位置,针对这一点,我们可以通过增添潜藏的 div 的数目来优化。比如将 100 个平铺 div 增添到 1000 个平铺 div。

运动不足丝滑

结果看起来不足丝滑,这个大概需要通过合理的缓动函数,恰当的动画延时来优化。

燥起来吧

嗯。道理把握了,下面我们来看看,使用这个技巧还能鼓捣出什么成心思的结果。

CSS鼠标跟从按钮结果

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

4.gif

CodePen Demo -- Gooey mouse follow

好吧,抱负很饱满,实际很骨感。仅仅使用 CSS,还是有诸多限制。

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

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

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

5.gif

有点太太太惊奇了,可以轻微收敛点结果,通过调整色彩,滤镜强度(就是各种尝试...),得到一个轻微好一丢丢丢的相似结果:

6.gif

Demo 戳我,CodePen Demo -- CSS鼠标跟从按钮结果

全屏鼠标跟从动画

OK,连续,下面来点更炫的。嗯,就是那种金玉其外的。sweat_smile

假如我们操纵的不止一个元素,而是多个元素。多个元素之间的动画结果再设定不一样的 transition-delay ,次序延迟运动。哇哦,想想就很冲动。比如这样:

7.gif

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

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

8.gif

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

鼠标跟从指示

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

9.gif

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 你可以来这里瞧瞧:

CSS-Inspiration -- CSS灵感

好了,本文到此完毕,但愿对你有帮忙 :)

本文转自:https://www.cnblogs.com/coco1s/p/10481872.html

更多炫酷CSS3、html5、javascript、jQuery特效代码,尽在:js特效大全

以上就是纯 CSS 怎样实实际现鼠标跟从结果?(代码详解)的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板