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

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

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

原理
纯css实现鼠标移动方向遮罩效果
首先定位4个不同方向的遮罩，然后给每个遮罩添加伪元素before

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯css实现不同方向的遮罩效果</title>
<style>
.box {
margin: 5em auto;
position: relative;
width: 10em;
height: 10em;
line-height: 10em;
overflow: hidden;
}

.box__right, .box__left, .box__top, .box__bottom, .box__center {
position: absolute;
width: inherit;
height: inherit;
text-align: center;
line-height: inherit;
transition: transform .4s ease;
}

.box__right:before, .box__left:before, .box__top:before, .box__bottom:before, .box__center:before {
position: absolute;
content: '';
/*
* Calculation:
* ____a____
* /|\ |
* b | \ |
* / a \ |
* \ | / |
* \ | / |
* \|/________|
*
* a^2 = b^2+b^2
*
* solve to b:
*
* a^2 = 2b^2 | /2
* a^2 / 2 = b^2 | sqrt
* a / sqrt(2) = b
*
* Percentage:
* a = 100%
* 100 / sqrt(2) = 70.71%
* ------
*/
width: 70.71%;
height: 70.71%;
transform: rotate(45deg);
}

.box__right:hover, .box__left:hover, .box__top:hover, .box__bottom:hover, .box__center:hover {
transform: translateX(0);
z-index: 1;
}

.box__right:hover:before, .box__left:hover:before, .box__top:hover:before, .box__bottom:hover:before, .box__center:hover:before {
width: 100%;
height: 100%;
transform: none;
}

.box__right {
background: blue;
transform: translateX(100%);
}

.box__right:before {
right: 100%;
bottom: 0;
transform-origin: 100% 100%;
}

.box__right:hover ~ .box__center {
transform: translateX(-100%);
}

.box__left {
background: green;
transform: translateX(-100%);
}

.box__left:before {
left: 100%;
transform-origin: 0 0;
}

.box__left:hover ~ .box__center {
transform: translateX(100%);
}

.box__top {
background: red;
transform: translateY(-100%);
}

.box__top:before {
top: 100%;
right: 0;
transform-origin: 100% 0;
}

.box__top:hover ~ .box__center {
transform: translateY(100%);
}

.box__bottom {
background: yellow;
transform: translateY(100%);
}

.box__bottom:before {
bottom: 100%;
left: 0;
transform-origin: 0 100%;
}

.box__bottom:hover ~ .box__center {
transform: translateY(-100%);
}

.box__center {
background: orange;
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="box__right">Right → Left</div>
<div class="box__left">Left → Right</div>
<div class="box__top">Top → Bottom</div>
<div class="box__bottom">Bottom → Top</div>
<div class="box__center">Hover from any side</div>
</div>
</div>
</body>
</html>

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

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

相关推荐