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

在codepen上看到一款css效果，很不错 
 
根据鼠标进入框的方向的不同，遮罩进入的方向也不同。

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

原理
 
首先定位4个不同方向的遮罩，然后给每个遮罩添加伪元素before 
 
 

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

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

   
   
   

   

Right → Left

   

Left → Right

   

Top → Bottom

   

Bottom → Top

   

Hover from any side

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