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

最新推荐文章于 2024-06-25 00:01:01 发布

zzh1918

最新推荐文章于 2024-06-25 00:01:01 发布

阅读量2.6k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37860930/article/details/81486285

版权

css 专栏收录该内容

13 篇文章 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>