CSS鼠标跟随的原理
来源：https://www.py.cn/web/css/29720.html
热度:407 更新时间：2022-08-06
文章导读：说明1、鼠标跟随就是元素会跟随着鼠标的移动，而作出相对应的运动。2、为了能够监控当前鼠标的位置，我们只需在页面上铺上元素即可。实例...//100个.g-container{position:relative;width:100vw;hei。
说明
1、鼠标跟随就是元素会跟随着鼠标的移动，而作出相对应的运动。
2、为了能够监控当前鼠标的位置，我们只需在页面上铺上元素即可。
实例
... // 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)
}
}以上就是CSS鼠标跟随的原理，希望对大家有所帮助。
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
