纯css实现关闭按钮
【纯css实现关闭按钮】问题背景：
做一个提示弹窗。设计图上面有一个x的关闭按钮，在图标库没找到合适的，开始为了偷懒用的字母x，后来ui说看起来怪怪的。没办法只有根据设计图一比一的画一个。
实现：
采用::after和 ::before 伪元素。
这里穿插一个小知识点
伪元素：是在内容元素前后插入一个额外的元素。这些元素在文档源中不可见，但是在显示中可见。dom结构：
伪类：比如hover 等特殊交互行为
content 样式：
* {
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%;
}
最终效果：
文章图片
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM