css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。
预备知识
伪元素
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。伪元素主要有: ::first-letter 第一个字母的样式 ::first-line 首行文字的样式 ::before 元素头部添加的修饰 ::after 元素尾部添加的修饰 ::placeholder input的占位符样式 ::selection 被选中元素的样式
我个人觉得伪元素可以解释为元素的修饰,可以为元素带来额外的附加样式,属于额外的文档结构。
伪类
用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性,比如a标签的hover表示鼠标经过的样式,visited表示访问过的链接的样式,更多的用来描述元素状态变化时的样式,伪类主要有: :link :visited :hover :active :focus :lang(fr) :not(s) :root :first-child :last-child :only-child :nth-child(n) :nth-last-child(n) :first-of-type :last-of-type :only-of-type :nth-of-type(n) :nth-last-of-type(n) :empty :checked :enabled :disabled * :target
我们利用css伪类和伪元素可以实现很多强大的视觉效果,这里我主要介绍伪元素,如果对伪类或其他css特性感兴趣,可以看看我之前的css文章,写的很全面。
正文
先看看我们用纯css实现的图标库:
当然,如果我们知道了做出如上图标的css原理,那么我们就可以实现更加丰富复杂的图形,甚至可以打造自己的图标库。
接下来我会介绍实现如上图标的方式和方法,并给出部分源码,方便大家学习。
原理
我们实现如上css图标是基于伪元素的,可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果,我们在上文中也介绍了伪元素的概念和类型,接下来让我们来实现它吧~
实现箭头
思路其实就是利用元素的::before伪元素画一个三角形,用css设置span样式为一条线并进行布局定位:
&.arrow-hor {width: 16px;height: 1px;}
这样就实现了一个指向右的箭头,我们用类似的方法也可以实现左箭头,上下箭头,实现双向箭头只需要加一个::after伪类并做适当定位就好了。
实现搜索图标
实现搜索图标实际上只需要一个圆和一根线,然后我们会用transform:ratate来实现角度倾斜,具体实现如下:
&::after {content: '';display: inline-block;width: 1px;height: 4px;background-color: #ccc;}
}
// html
实现头像
实现头像我们要利用before和after伪元素,分别做人物头部和身体,身体我们会用css画一个椭圆来做:
&::before {content: '';display: inline-block;width: 28px;height: 40px;margin-left: -3px;border-radius: 50% 50%;flex-shrink: 0;background-color: #fff;}
实现地点图标
地点图标由一个圆和一个三角形组成,如果要做的精致一点,我们可以再用一个伪元素来做一个定点:
&::before {content: '';position: absolute;display: inline-block;width: 12px;height: 12px;border-radius: 50%;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: #fff;}
实现微信图标
图中2个眼睛主要是用到一个伪元素加上box-shadow来实现,这样可以节约一个伪元素用来做小尾巴,至于如何实现不同形状的三角形,如果有不懂的可以和我交流,具体实现如下:
&::before {content: '';margin-top: 14px;position: absolute;width: 4px;height: 4px;border-radius: 50%;background-color: #fff;box-shadow: 16px 0 0 #fff;}
实现对勾图标
这里也很简单,我们用伪元素的content里放置一个勾号,然后设置颜色大小就好啦:
&::after {content: '✓';color: #fff;font-size: 30px;font-weight: bold;}
}
// html
实现眼睛(一般用于网站访问量图标)
主要是做椭圆加上一个圆形的伪元素:
.view-icon {display: inline-flex;justify-content: center;align-items: center;width: 58px;height: 36px;background-color: #06c;border-radius: 50%;&::after {content: '';display: inline-block;width: 20px;height: 20px;border-radius: 50%;background-color: #fff;}
}
导航图标
原理类似,主要思想是画两个三较形,用伪元素的三角形遮住主元素底部即可:
.gps-icon {position: relative;display: inline-flex;justify-content: center;align-items: center;border-width: 30px 15px 30px 15px;border-color: transparent;border-style: solid;border-bottom-color: #06c;transform: translate(10px, -16px) rotate(32deg);&::after {position: absolute;bottom: -48px;content: '';display: inline-block;border-width: 10px 38px 30px 38px;border-color: transparent;border-style: solid;border-bottom-color: #fff;}
}
实现心形图标
原理就是用两个伪元素实现两个椭圆,旋转重合即可:
.logo-x {position: relative;display: inline-flex;width: 50px;height: 50px;border-radius: 50%;background-color: rgb(212, 73, 17);&::after {position: absolute;content: '';left: 10px;top: 12px;display: inline-block;width: 20px;height: 30px;border-radius: 50%;background-color: #fff;transform: rotate(135deg);}&::before {position: absolute;content: '';right: 10px;top: 12px;display: inline-block;width: 20px;height: 30px;border-radius: 50%;background-color: #fff;transform: rotate(-135deg);}
}
ps图标
这个也是用伪元素,一个伪元素用来做文字图形,一个用来做遮罩,来形成伪立体感:
.logo-ps {position: relative;display: inline-flex;justify-content: center;align-items: center;width: 50px;height: 50px;border-radius: 8px;background-color: rgb(15, 102, 184);&::before {position: absolute;content: '';display: inline-block;width: 50px;height: 40px;background-color: rgba(255, 255, 255, .1);}&::after {position: absolute;content: 'PS';font-size: 24px;display: inline-block;color: #fff;}
}
实现气泡对话框
和微信图标类似:
.logo-pp {display: inline-block;width: 150px;height: 50px;border-radius: 8px;background-color: rgb(68, 170, 59);&::before {content: '等你下课哦!';margin-top: 14px;margin-left: -33px;position: absolute;color: #fff;}&::after {content: '';margin-top: 42px;display: inline-block;border-width: 6px 10px 6px 10px;border-style: solid;border-color: transparent;border-top-color: rgb(68, 170, 59);transform: rotate(-147deg) translate(-12px, 6px);}
}
由于篇幅原因,其他的图标就不一一实现了,原理都类似,笔者之前曾利用这个方案做过一套100个图标的库,成功应用于各个项目中,由于体积小不会造成额外请求,所以更加实用,但更复杂的图形就为了方便还是建议用字体图标或者svg,base64等。
最后
如果想了解更多css,javascript,nodeJS等前端知识和实战,欢迎在公众号《趣谈前端》加入我们一起学习讨论,共同探索前端的边界。
更多推荐
- 如何快速掌握es6+新特性及核心语法?
- 15条前端必备的性能优化方法,你知道哪些
- 前端开发中79条不可忽视的知识点汇总
- 《javascript高级程序设计》核心知识总结
css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)相关推荐
- css 商城 两列_css大法之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- css 商城 两列_你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
- css 商城 两列_基于SSM的网上水果生鲜超市商城管理系统
运行环境: 最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以.IDE环境: Eclipse,Myeclipse,IDEA都可以tomcat环境: Tomcat 7.x,8. ...
- css 商城 两列_【云控基础】HTML+CSS基础入门
课程大纲: 第一部分:课程概述1.什么是HTML.CSS,能做什么?2.HTML.HTML5.H5的区别3.HTML+CSS全览4.HTML.CSS的学习路径和学习方法第二部分:HTML+CSS开发环 ...
- C++课程设计实训_基于多态书籍信息管理系统的设计与实现、附源码、有过程截图
C++课程设计实训_基于多态书籍信息管理系统的设计与实现.附源码,有过程截图 书籍信息管理系统的设计与实现(基于多态) 学生姓名: 学 号: 指导老师: 所 在 系: 专 业: 班 级: C++课程设 ...
- 曝肝三天,两千行Python代码,制作B站视频下载工具(附源码)
曝肝三天,两千行Python代码,制作B站视频下载工具(附源码) 文章目录 一.准备工作 二.预览 1.启动 2.解析 3.下载中 4.下载完成 5.结果 三.设计流程 1.bilibili_vide ...
- python编程选股_随笔吧量化投资选股的python程序实践(附源码)
量化投资选股的python程序实践(附源码) 首先选取沪深股票市场,本人比较关注的12只股票: 000002 万科A,600566 济川药业,300051 三五互联,002039 黔源电力,60087 ...
- springboot项目文档源码_基于SpringBoot和Vue的企业级中后台项目(附源码)
简介 SpringBoot和Vue,前后端分离,我们开源一套漂亮的代码和一套整洁的代码规范,让大家在这浮躁的代码世界里感受到一股把代码写好的清流!同时又让开发者节省大量的时间,减少加班,快乐工作,热爱 ...
- 一款开源的微信小程序商城项目,接外包直接拿去改改,就能用(附源码)。。。...
大家好,今天,推荐一个小程序商城项目. 上次是谁要小程序商城项目啊,猿哥帮你找到了. 这是我目前见过的最好的小程序商城项目.功能完整,代码结构清晰.值得推荐. 后端部分虽然是PHP的,但是建议有研究精 ...
最新文章
- java源码推荐_基于java的推荐系统实现源代码
- TSM简介(一)- 原理与特点
- PHP中的常见魔术方法功能作用及用法实例
- [Abp vNext 源码分析] - 3. 依赖注入与拦截器
- TypeError: cannot unpack non-iterable NoneType object
- 虚拟服务器选那个存储好,如何选择虚拟环境中的存储?
- 1.8. subshell
- pandas日常数据处理
- 2018-2019-2 20175215 实验五《网络编程与安全》实验报告
- 带有权限设置的Excel协同编辑
- 【14年浙江省赛 ZOJ 3778】Talented Chef
- 20200714一维数组的经典例题(成绩的最高分,最低分;猜中数字游戏;数组的增添改查;)
- Element组件 Drawer 抽屉的关闭问题
- php单引号的作用,PHP中单引号和双引号的区别与作用
- 什么蓝牙耳机音质好?盘点四款HIFI音质蓝牙耳机排行榜
- 【每天更新】2022年最新WordPress主题下载(2022-5-12)
- 一笔画:五环,python-turtle。画圆圈
- 面试时,被问到职业规划如何作答?
- 菜鸟学Python之求水仙花数
- 2022-2028年中国喷砂设备行业发展动态及投资前景分析报告