純css實現鼠標移動方向遮罩效果

在codepen上看到一款css效果，很不錯 根據鼠標進入框的方向的不一樣，遮罩進入的方向也不一樣。css 本身思考如何判斷鼠標進入的方向，沒有事件能夠直接獲取進入元素的方向，雖然能夠用鼠標座標計算，可是太麻煩。直接用純css就能夠實現html 原理 首先定位4個不一樣方向的遮罩，而後給每一個遮罩添加僞元素before 上圖中黑框內不一樣顏色的地方就是每一個遮罩的before，鼠標從某個方向進入時

>>阅读原文<<