纯 CSS 实现鼠标跟随效果

欢迎微信关注Jerome blog，用技术的心去生活

鼠标跟随效果，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样：

通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。然而，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。

原理

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

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

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

我们使用 100 个元素，将整个页面铺满，hover 的时，展示颜色，核心 SCSS 代码如下：

可以得到这样的效果：

好的，如果把每个元素的 hover 效果去掉，那么这个时候操作页面，其实是没有任何效果的。但同时，通过 :hover 伪类，我们又是可以大概得知当前鼠标是处于页面上哪个区间的。

好继续，我们再给页面添加一个元素（圆形小球），将它绝对定位到页面中间：

最后，我们借助 ~ 兄弟元素选择器，在 hover 页面的时候（其实是 hover 一百个隐藏的 div），通过当前 hover 到的 div，去控制小球元素的位置。

至此，一个简单的纯 CSS 实现鼠标跟随的效果就实现了，方便大家理解，看看下面这张图就明白了：

感兴趣的同学可以自己动手，更多的去尝试，组合。

纯 CSS 实现鼠标跟随效果相关推荐

不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
mousemove实现图片鼠标跟随效果
前言用html+css+JavaScript实现了一个图片鼠标跟随效果一.思路鼠标不断的移动,使鼠标移动事件:mousemove: 在页面中移动,给document注册事件: 图片要移动距离,而 ...
html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性
导航下拉,大家首先想到的是用JS来做.或许是大家看到的下拉菜单演示,多是JS控制的下拉,导致从先入为主的意识上,误以为二级下拉是很难的东西,必须要会Javascript才能做. 其实,一个简答的下拉效 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要:元素的left位置 = 鼠标当前 ...
[css] 如何使用css实现鼠标跟随？
[css] 如何使用css实现鼠标跟随? 铺满元素,hover + box-shadow 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
js实现鼠标跟随效果
在平时开发中,实现鼠标跟随效果并不是很常见,但是在一些个人博客和个人网站中这个效果有时候会用到有些游戏网站中也会用到这个效果.这里分享的是一个例子.代码如下,, 注意我这里跟随的是一个图片,也可以根 ...

纯 CSS 实现鼠标跟随效果

欢迎微信关注Jerome blog，用技术的心去生活

纯 CSS 实现鼠标跟随效果相关推荐

最新文章

热门文章