当前位置:  首页  >  前端开发  >  CSS+DIV

纯CSS如何实现实现鼠标跟随效果?(代码详解)

鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。通常而言,CSS负责表现,JavaScript负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助JS。
鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。

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

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

原理

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

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

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

我们使用 100 个元素,将整个页面铺满,hover 的时,展示颜色,核心 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 效果去掉,那么这个时候操作页面,其实是没有任何效果的。但同时,通过 :hover 伪类,我们又是可以大概得知当前鼠标是处于页面上哪个区间的。

好继续,我们再给页面添加一个元素(圆形小球),将它绝对定位到页面中间:

.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 实现鼠标跟随的效果就实现了,方便大家理解,看看下面这张图就明白了:

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 如何实现实现鼠标跟随效果?(代码详解)的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有