如何实现微信同款领取红包背景变暗的效果？

本文链接：https://blog.youkuaiyun.com/m0_54066656/article/details/130047714

书接上文：

前端写微信聊天界面https://blog.youkuaiyun.com/m0_54066656/article/details/129875630?spm=1001.2014.3001.5501

前端写红包封面https://blog.youkuaiyun.com/m0_54066656/article/details/129895315?spm=1001.2014.3001.5501

接着进入~~

正文：

经过上两个例子，我们已经可以写出微信聊天界面和红包封面了，那么下一步，我们要做的就是把这两者解合起来。那么，接下来就跟着我的思路一起完成吧。

背景变暗效果的实现：

大伙都知道，我们收到红包的时候，背景会变暗的，那么怎么用前端来实现这个效果呢？

这个时候，就需要用到JS了，如果你没有学过，也不要着急，其实蛮简单的。

先做一个按钮：

我们先用前端写出一个按钮来，这就是我们的收到红包信息的按钮：

代码其实很简单：

<div class="box">
        <input class="red" type="button" value="恭喜发财" onclick="display()">
    </div>

css的代码：

  .box {
            width: 200px;
            height: 200px;
            margin: auto;
        }

        .red {
            cursor: pointer;
            width: 200px;
            height: 78px;
            background-color: rgb(230, 0, 0);
            border: 0;
            border-radius: 8px;
        }

最后的效果如下：

加入红包封面：

这个时候我们点击这个红包，就应该打开红包了，于是把我们上次写的红包封面加入，代码是这样的：

<div class="window">
    <div class="open">
        <div class="cir"></div>
        <button onclick="hide()">开</button>
        <input type="button" value="×" onclick="hide()">
    </div>
</div>

CSS代码是这样的：

.window {
            display: none;
            margin: 100px;
            width: 260px;
            height: 460px;
            position: relative;
            border-radius: 36px;
            background-color: rgb(230, 0, 0);
            /* 层级为1，最高层 */
            z-index: 1;
        }

        .open>.cir {
            overflow: hidden;
            position: relative;
            top: 36px;
            width: 260px;
            height: 324px;
            border-bottom: 2px solid rgb(255, 215, 0);
            border-radius: 72px 72px 480px 480px;
            background-color: rgb(230, 0, 0);
            z-index: 1;
        }

        .open>button {
            cursor: pointer;
            position: relative;
            transform: translate(105px, 8px);
            width: 50px;
            height: 50px;
            border: 0;
            border-radius: 50%;
            background: rgb(255, 215, 0);
            z-index: 2;
        }

        .open>input {
            cursor: pointer;
            position: relative;
            transform: translate(65px, 136px);
            width: 20px;
            height: 20px;
            background: rgb(255, 215, 0);
            border: 0;
            border-radius: 50%;
        }

做到这步，我们的效果还是跟上图一样，这是因为我们没有做JS效果：

<script>
        // 获取元素
        const win = document.querySelector('.window')

        function display() {
            win.style.display = "block";
            shadow.style.display = "block";
            console.log(shadow)
        }

    </script>

做完之后，我们就可以点击红包，并出现红包封面了：

背景变暗：

我们知道，前端其实就是一层一层堆叠起来的，在这里，我们可以这样理解：

body就是背景板，div-box就是我们放在上面的一个小板子，红包就是我在这个小板子添置的一个按钮，点击这个按钮，红包封面就会出现。

这个时候，如果我们在这个按钮上面，红包封面的下面（也就是这两者的夹层上）加入一层背景，那么就可以实现背景变暗了，这就是层级关系：z-index了，在MDN中关于z-index的解释如下：

简单地说，z-index数值越大，层级越高。

加入背景之后，效果是这样的：

这个背景的长度和宽度要按照实际来进行设定。

代码如下：

<div class="box">
        <input class="red" type="button" value="恭喜发财" onclick="display()">

        <div class="window">
            <div class="open">
                <div class="cir"></div>
                <button onclick="hide()">开</button>
                <input type="button" value="×" onclick="hide()">
            </div>
        </div>

        <div class="shadow"></div>

    </div>

css样式：

.shadow {
            display: none;
            width: 1000px;
            height: 800px;
            border-radius: 36px;
            position: relative;
            left: -4px;
            transform: translateY(-85%);
            background-color: rgba(128, 128, 128, .5);
            /* 层级为0，最低层 */
            z-index: 0;
        }

JS：

<script>
        // 获取元素
        const win = document.querySelector('.window')
        const shadow = document.querySelector('.shadow')

        function display() {
            win.style.display = "block";
            shadow.style.display = "block";
            console.log(shadow)
        }

        function hide() {
            win.style.display = "none";
            shadow.style.display = "none";
        }
    </script>

总结：

其实整个代码还是非常简单的，那么现在我们来做一个汇总：

<div class="box">
        <input class="red" type="button" value="恭喜发财" onclick="display()">

        <div class="window">
            <div class="open">
                <div class="cir"></div>
                <button onclick="hide()">开</button>
                <input type="button" value="×" onclick="hide()">
            </div>
        </div>

        <div class="shadow"></div>

    </div>

css样式：

.box {
            width: 200px;
            height: 200px;
            margin: auto;
        }

        .red {
            cursor: pointer;
            width: 200px;
            height: 78px;
            background-color: rgb(230, 0, 0);
            border: 0;
            border-radius: 8px;
        }

        .window {
            display: none;
            margin: 100px;
            width: 260px;
            height: 460px;
            position: relative;
            border-radius: 36px;
            background-color: rgb(230, 0, 0);
            /* 层级为1，最高层 */
            z-index: 1;
        }

        .open>.cir {
            overflow: hidden;
            position: relative;
            top: 36px;
            width: 260px;
            height: 324px;
            border-bottom: 2px solid rgb(255, 215, 0);
            border-radius: 72px 72px 480px 480px;
            background-color: rgb(230, 0, 0);
            z-index: 1;
        }

        .open>button {
            cursor: pointer;
            position: relative;
            transform: translate(105px, 8px);
            width: 50px;
            height: 50px;
            border: 0;
            border-radius: 50%;
            background: rgb(255, 215, 0);
            z-index: 2;
        }

        .open>input {
            cursor: pointer;
            position: relative;
            transform: translate(65px, 136px);
            width: 20px;
            height: 20px;
            background: rgb(255, 215, 0);
            border: 0;
            border-radius: 50%;
        }

        .shadow {
            display: none;
            width: 1000px;
            height: 800px;
            border-radius: 36px;
            position: relative;
            left: -4px;
            transform: translateY(-85%);
            background-color: rgba(128, 128, 128, .5);
            /* 层级为0，最低层 */
            z-index: 0;
        }

JS代码：

 <script>
        // 获取元素
        const win = document.querySelector('.window')
        const shadow = document.querySelector('.shadow')

        function display() {
            win.style.display = "block";
            shadow.style.display = "block";
            console.log(shadow)
        }

        function hide() {
            win.style.display = "none";
            shadow.style.display = "none";
        }
    </script>

整个实现效果还是很简单的，这期主要是讲怎么加上背景，其实最主要的代码还是display和hide的运用。

下期，我们将整合这些代码到我们的微信上去，敬请期待~~