在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 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>
完整效果可以查看鱼头的codepen
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]