锐客网

纯css实现关闭按钮

【纯css实现关闭按钮】问题背景:
做一个提示弹窗。设计图上面有一个x的关闭按钮,在图标库没找到合适的,开始为了偷懒用的字母x,后来ui说看起来怪怪的。没办法只有根据设计图一比一的画一个。
实现:
采用::after和 ::before 伪元素。
这里穿插一个小知识点

伪元素:是在内容元素前后插入一个额外的元素。这些元素在文档源中不可见,但是在显示中可见。
伪类:比如hover 等特殊交互行为
dom结构:
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%; }

最终效果:

纯css实现关闭按钮
文章图片



      前端css弹窗