纯css实现关闭按钮

Lingo

问题背景:
做一个提示弹窗。设计图上面有一个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>

最终效果:
19D06D3F5EEAF57C7A2F29579E03DA32.png

阅读 160
4 声望
7 粉丝
0 条评论
你知道吗?

4 声望
7 粉丝
文章目录
宣传栏