纯css实现close - ×
2016-03-08 11:12
841 查看
.close{position: relative;display: inline-block;width: 0.14rem;height: 0.14rem;overflow: hidden;}
.close::before{-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.close::before, .close::after {content: ''; position: absolute; height: 0.01rem; width: 100%;top: 50%;left: 0;margin-top: 0.01rem; background: #ff6c00;}
.close::after{-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.close::before{-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.close::before, .close::after {content: ''; position: absolute; height: 0.01rem; width: 100%;top: 50%;left: 0;margin-top: 0.01rem; background: #ff6c00;}
.close::after{-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS样式优先权
- 纯CSS修改浏览器的默认滚动条样式
- CSS 属性 - 伪类和伪元素
- 我的css释疑-float line-height inline-block vertical-align
- CSS样式
- CSS选择器
- (28)odoo中css可用颜色对照表
- CSS-----选择器分类、层叠、特殊性与继承
- html/css基础篇——GET和POST的区别
- html/css基础篇——link和@inport详解以及脚本执行顺序探讨
- html/css基础篇——iframe和frame的区别【转】
- html/css基础篇——html代码编写过程中的几个警惕点
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
- html/css基础篇——关于浏览器window、document、html、body高度的探究
- CSS样子中样式优先级设置
- SLD样式
- 前端性能优化--能用css的地方尽量不要用js
- js用currentStyle和getComputedStyle获取css样式（非行间）
- CSS样式简单总结
- CSS--箭头