关于前端:纯css实现关闭按钮

46次阅读

共计 985 个字符，预计需要花费 3 分钟才能阅读完成。

问题背景：
做一个提醒弹窗。设计图下面有一个 x 的敞开按钮，在图标库没找到适合的，开始为了偷懒用的字母 x，起初 ui 说看起来怪怪的。没方法只有依据设计图一比一的画一个。

实现：
采纳::after 和 ::before 伪元素。
这里交叉一个小知识点

伪元素：是在内容元素前后插入一个额定的元素。这些元素在文档源中不可见，然而在显示中可见。
伪类：比方 hover 等非凡交互行为

dom 构造：

<body>
    <div class="box">
        <div> content </div>
        <div class="mask"></div>
        <div class="dialog">
            <div class="close"></div>
        </div>
    </div>
</body>

款式：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100vw;
            height: 0;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            opacity: 0.5;
            background-color: #000;
        }

        .dialog {
            position: fixed;
            bottom: 0;
            width: 100vw;
            height: 40vh;
            background-color: #fff;
            z-index: 1000;
            border-radius: 4vw 4vw 0 0;
            padding-top: 3vw;
        }

        .close {
            position: absolute;
            right: 4vw;
            width: 4vw;
            height: 4vw;
            line-height: 4vw;
            text-align: center;
            color: #222;
        }

        .close:before {
            position: absolute;
            content: '';
            width: 0.8vw;
            height: 4vw;
            background: #222;
            transform: rotate(45deg);
            top: calc(50% - 0.45vw);
            left: 50%;
        }

        .close:after {
            content: '';
            position: absolute;
            width: 0.8vw;
            height: 4vw;
            background: #222;
            transform: rotate(-45deg);
            top: calc(50% - 0.45vw);
            left: 50%;
        }
    </style>

最终成果：

正文完