如何用纯CSS实现根据鼠标进入方向移动物体的性能
|
今天小编跟大家讲解下有关“如何用纯CSS实现根据鼠标进入方向移动物体的功能”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。 在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。 给出的初始结构如下： <style> body { padding: 2em; text-align: center; } .block { position: relative; display: inline-block; width: 10em; height: 10em; vertical-align: middle; } .block_content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 10em; background: #333; color: #FFF; } </style> <p class="text">从不同方向使鼠标指针移过下面的内容</p> <p></p> <span> </span> <div class="block"> <div class="block_content"> Hover me! </div> </div> <span> </span> <p></p> 净会问这种不实用又跟业务没啥关系的问题，气抖冷，中国前端什么时候才能真正的站起来。 谢谢面试官提出的好问题，我会努力实现出来的。 所以这个功能真的能用纯 CSS 实现吗？ 答案是可以的，首先我们来分解下思路。 CSS 鼠标事件 首先根据题干，我们知道这题是需要用到鼠标操作的，JS 里我们有各种 mouse 事件，但同样的，CSS 我们也有 :hover 。 这题我们需要利用到的选择器就是 :hover 了 判断方向 判断方向的功能便是本题的核心。 从题图上来看，其实已经给了我们方向的指引，就是告诉我们鼠标要通过四个箭头的方向进入。 然后就是如果要纯 CSS 来实现，就是我们的鼠标必须要触碰到某个关键节点，而且这个节点的某个表现一定是可以代表这个方位的。 这就是题目给出的两个隐藏条件。 所以我们来尝试下实现。 首先要通过 :hover 来触碰到这个关键节点，而且是要在箭头指向的方向下触碰触发，那么我们可以在箭头所指的方向都加上一个能被触碰到的物体，例如这样： <style> .block_hoverer { position: absolute; width: 100%; height: 100%; z-index: 1; } .block_hoverer:nth-child(1) { background: red; } .block_hoverer:nth-child(2) { background: lime; } .block_hoverer:nth-child(3) { background: orange; } .block_hoverer:nth-child(4) { background: blue; } </style> <div class="block"> <div class="block_hoverer">上</div> <div class="block_hoverer">下</div> <div class="block_hoverer">左</div> <div class="block_hoverer">右</div> <div class="block_content"> Hover me! </div> </div> 效果如下： 我们可以发现，除了 右块 之外，都被遮住了，嗯，正常现象。 接下来我们只需要让这几个块退到边缘即可。 代码如下： .block_hoverer { position: absolute; z-index: 1; width: 100%; height: 100%; transition: all 0.3s ease; } .block_hoverer:nth-child(1) { background: red; top: -90%; } .block_hoverer:nth-child(2) { background: lime; top: 90%; }
.block_hoverer:nth-child(3) { background: orange; left: -90%; } .block_hoverer:nth-child(4) { background: blue; left: 90%; } 效果如下： 然后我们加上过渡： .block_hoverer { transition: all 0.3s ease; } .block_hoverer:hover { opacity: 1; top: 0; left: 0; } 效果如下： 一步就是隐藏起来： .block { position: relative; display: inline-block; overflow: hidden; width: 10em; height: 10em; vertical-align: middle; } .block_hoverer { opacity: 0; } .block_hoverer:hover { opacity: 1; } 效果如下： 所以我们有完整代码如下： <style> body { padding: 2em; text-align: center; } .block { position: relative; display: inline-block; overflow:hidden; width: 10em; height: 10em; vertical-align: middle; transform: translateZ(0); } .block_hoverer { position: absolute; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: all .3s ease; } .block_hoverer:nth-child(1) { background: red; top: -90%; } .block_hoverer:nth-child(2) { background: lime; top: 90%; } .block_hoverer:nth-child(3) { background: orange; left: -90%; } .block_hoverer:nth-child(4) { background: blue; left: 90%; } .block_hoverer:hover { opacity: 1; top: 0; left: 0; } .block_content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 10em; background: #333; color: #FFF; } </style> <body> <p class="text">从不同方向使鼠标指针移过下面的内容</p> <p></p> <span> </span> <div class="block"> <div class="block_hoverer">1</div> <div class="block_hoverer">2</div> <div class="block_hoverer">3</div> <div class="block_hoverer">4</div> <div class="block_content"> Hover me! </div> </div> <span> </span> <p></p> </body> 到此这篇关于“如何用纯CSS实现根据鼠标进入方向移动物体的功能”的文章就介绍到这了,更多相关内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！ （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
