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

最新推荐文章于 2022-08-24 10:14:02 发布

lvyang251314

最新推荐文章于 2022-08-24 10:14:02 发布

阅读量553

点赞数

分类专栏：前端

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

在codepen上看到一款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
来源：CSDN
原文：https://blog.csdn.net/qq_37860930/article/details/81486285
版权声明：本文为博主原创文章，转载请附上博文链接！

lvyang251314

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css实现鼠标移动方向遮罩效果

在codepen上看到一款css效果，很不错根据鼠标进入框的方向的不同，遮罩进入的方向也不同。自己思考如何判断鼠标进入的方向，没有事件可以直接获取进入元素的方向，虽然可以用鼠标坐标计算，但是太麻烦。直接用纯css就可以实现原理首先定位4个不同方向的遮罩，然后给每个遮罩添加伪元素before 上图中黑框内不同颜色的地方就是每个遮罩的before，鼠标从某个方向进入时...
复制链接

扫一扫