本文摘自PHP中文网,作者青灯夜游,侵删。
鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS。
当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。
我们先来看看鼠标跟随效果是什么样的:

原理
以上面的 Demo 为例子,要使用 CSS 实现鼠标跟随,最重要的一点就是:
如何实时监测到当前鼠标处于何处?
OK,其实很多 CSS 效果,都离不开 障眼法 二字。要监测到当前鼠标处于何处,我们只需要在页面上铺满元素即可:
我们使用 100 个元素,将整个页面铺满,hover 的时,展示颜色,核心 SCSS 代码如下:
1 2 3 4 5 6 7 | < div class = "g-container" >
< div class = "position" ></ div >
< div class = "position" ></ div >
< div class = "position" ></ div >
< div class = "position" ></ div >
... // 100个
</ div >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .g-container {
position : relative ;
width : 100 vw;
height : 100 vh;
}
.position {
position : absolute ;
width : 10 vw;
height : 10 vh;
}
@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背景图片怎么自适应
怎么设置css字体单行居中
css怎么定义div的宽度和高度
css中的“计算属性”是什么
css如何设置超出部分隐藏
css定位方式有哪几种
css边距怎么设置
css怎么设置左边距
原生js如何修改css
纯css如何实现3d书本效果?(代码示例)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 纯 CSS 如何实现鼠标跟随效果?(代码详解)