【说站】CSS鼠标跟随的原理
2024-11-25
14
CSS鼠标跟随的原理
说明
1、鼠标跟随就是元素会跟随着鼠标的移动,而作出相对应的运动。
2、为了能够监控当前鼠标的位置,我们只需在页面上铺上元素即可。
实例
<div> <div></div> <div></div> <div></div> <div></div> ... // 100个 </div>
.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鼠标跟随的原理,希望对大家有所帮助。更多编程基础知识学习:python学习网
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
更新于:13天前赞一波!1
相关文章
- 【说站】python归并排序的实现原理
- 【说站】python希尔排序的使用原理
- 【说站】java枚举类型的原理
- 【说站】python九宫格图片的原理
- 【说站】css中flex-basis的使用
- 【说站】css flex的排列方式
- 【说站】css Flexbox布局的介绍
- 【说站】css Flex容器属性有哪些
- 【说站】python GIL锁的底层原理探究
- 【说站】css外边距margin是什么
- 【说站】css中Grid模块是什么
- 【说站】css设置行间距的方法
- 【说站】css Flex容器如何理解
- 【说站】css padding内边距的理解
- 【说站】css clamp()函数是什么
- 【说站】css中Min()函数如何使用
- 【说站】css如何使用scale()方法进行缩放
- 【说站】css设置行间距的三种方法
- 【说站】css line-height属性是什么
- 【说站】css点击元素变更颜色的方法
文章评论
评论问答