本文摘自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中box是什么文件
css的属性分为什么类别
css如何让文字成排显示
css的含义是什么
css如何设置元素高度自适应
css flex属性怎么用
css page-break-before属性怎么用
css 如何显示部分图片
css是用来做什么的?
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 纯 CSS 如何实现鼠标跟随效果?(代码详解)