纯css实现鼠标移动方向遮罩效果


在codepen上看到一款css效果,很不错 
 纯css实现鼠标移动方向遮罩效果_第1张图片
根据鼠标进入框的方向的不同,遮罩进入的方向也不同。

自己思考如何判断鼠标进入的方向,没有事件可以直接获取进入元素的方向,虽然可以用鼠标坐标计算,但是太麻烦。直接用纯css就可以实现

原理
 纯css实现鼠标移动方向遮罩效果_第2张图片
首先定位4个不同方向的遮罩,然后给每个遮罩添加伪元素before 
 纯css实现鼠标移动方向遮罩效果_第3张图片

 

上图中黑框内不同颜色的地方就是每个遮罩的before,鼠标从某个方向进入时,必定会停在某个颜色区域上,停在哪个区域的颜色上就说明是从哪个颜色进入的,我们给不同遮罩加上hover效果就可以了。

这种方式的局限性就是box只能是正方形,因为4个before要将box分成4个直角三角形 
当box是矩形时就要用js来判断鼠标进入时的方向,具体可以参考判断鼠标移入移出元素时的方向




   
    纯css实现不同方向的遮罩效果
   



   
Right → Left

   
Left → Right

   
Top → Bottom

   
Bottom → Top

   
Hover from any side





作者:zzh1918 
来源:CSDN 
原文:https://blog.csdn.net/qq_37860930/article/details/81486285 
版权声明:本文为博主原创文章,转载请附上博文链接!

你可能感兴趣的:(前端)