文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

前端:使用纯css实现超实用的图标库(附源码)

2024-12-03 04:49

关注

[[398694]]

预备知识

伪元素

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。伪元素主要有:

我个人觉得伪元素可以解释为元素的修饰,可以为元素带来额外的附加样式,属于额外的文档结构。

伪类

用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性,比如a标签的hover表示鼠标经过的样式,visited表示访问过的链接的样式,更多的用来描述元素状态变化时的样式,伪类主要有:

我们利用css伪类和伪元素可以实现很多强大的视觉效果,这里我主要介绍伪元素,如果对伪类或其他css特性感兴趣,可以看看我之前的css文章,写的很全面。

正文

先看看我们用纯css实现的图标库:

当然,如果我们知道了做出如上图标的css原理,那么我们就可以实现更加丰富复杂的图形,甚至可以打造自己的图标库。接下来我会介绍实现如上图标的方式和方法,并给出部分源码,方便大家学习。

原理

我们实现如上css图标是基于伪元素的,可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果,我们在上文中也介绍了伪元素的概念和类型,接下来让我们来实现它吧~

实现箭头

思路其实就是利用元素的::before伪元素画一个三角形,用css设置span样式为一条线并进行布局定位:

  1. // less 
  2. .arrow { 
  3.     position: relative
  4.     display: inline-block; 
  5.     line-height: 0; 
  6.     background-color: #ccc; 
  7.     &.arrow-hor { 
  8.         width: 16px; 
  9.         height: 1px; 
  10.     } 
  11.     &.arrow-hor.right::before { 
  12.         content: ''
  13.         position: absolute
  14.         top: -4px; 
  15.         right: -8px; 
  16.         border: 4px solid transparent; 
  17.         border-left: 4px solid #ccc; 
  18.     } 
  19.  
  20. // html 
  21. "arrow arrow-hor right"> 

这样就实现了一个指向右的箭头,我们用类似的方法也可以实现左箭头,上下箭头,实现双向箭头只需要加一个::after伪类并做适当定位就好了。

实现搜索图标

实现搜索图标实际上只需要一个圆和一根线,然后我们会用transform:ratate来实现角度倾斜,具体实现如下:

  1. // less 
  2. .search { 
  3.     position: relative
  4.     display: inline-block; 
  5.     width: 12px; 
  6.     height: 12px; 
  7.     border-radius: 50%; 
  8.     border: 1px solid #ccc; 
  9.     text-align: center; 
  10.     transform: rotate(-45deg); 
  11.     &::after { 
  12.         content: ''
  13.         display: inline-block; 
  14.         width: 1px; 
  15.         height: 4px; 
  16.         background-color: #ccc; 
  17.     } 
  18. // html 
  19. "search"> 

实现头像

实现头像我们要利用before和after伪元素,分别做人物头部和身体,身体我们会用css画一个椭圆来做:

  1. // less 
  2. .dot-pan { 
  3.     position: relative
  4.     display: inline-flex; 
  5.     width: 60px; 
  6.     height: 60px; 
  7.     line-height: 0; 
  8.     align-items: center; 
  9.     border-radius: 50%; 
  10.     background-color: #06c; 
  11.     transform: rotate(-90deg); 
  12.     &::before { 
  13.         content: ''
  14.         display: inline-block; 
  15.         width: 28px; 
  16.         height: 40px; 
  17.         margin-left: -3px; 
  18.         border-radius: 50% 50%; 
  19.         flex-shrink: 0; 
  20.         background-color: #fff; 
  21.     } 
  22.  
  23.     &::after { 
  24.         content: ''
  25.         display: inline-block; 
  26.         width: 20px; 
  27.         height: 20px; 
  28.         flex-shrink: 0; 
  29.         border-radius: 50%; 
  30.         background-color: #fff; 
  31.     } 
  32. // html 
  33. "search"> 

实现地点图标

地点图标由一个圆和一个三角形组成,如果要做的精致一点,我们可以再用一个伪元素来做一个定点:

  1. // less 
  2. .locate-icon { 
  3.     position: relative
  4.     display: inline-block; 
  5.     width: 50px; 
  6.     height: 50px; 
  7.     border-radius: 50%; 
  8.     background-color: #06c; 
  9.     &::before { 
  10.         content: ''
  11.         position: absolute
  12.         display: inline-block; 
  13.         width: 12px; 
  14.         height: 12px; 
  15.         border-radius: 50%; 
  16.         left: 50%; 
  17.         top: 50%; 
  18.         transform: translate(-50%, -50%); 
  19.         background-color: #fff; 
  20.     } 
  21.     &::after { 
  22.         content: ''
  23.         margin-top: 45px; 
  24.         display: inline-block; 
  25.         border: 15px solid transparent; 
  26.         border-top-color: #06c; 
  27.     } 
  28. // html 
  29. "locate-icon mr-20"> 

实现微信图标

图中2个眼睛主要是用到一个伪元素加上box-shadow来实现,这样可以节约一个伪元素用来做小尾巴,至于如何实现不同形状的三角形,如果有不懂的可以和我交流,具体实现如下:

  1. // less 
  2. .wechat-icon { 
  3.     display: inline-block; 
  4.     width: 50px; 
  5.     height: 50px; 
  6.     border-radius: 50%; 
  7.     background-color: rgb(68, 170, 59); 
  8.     &::before { 
  9.         content: ''
  10.         margin-top: 14px; 
  11.         position: absolute
  12.         width: 4px; 
  13.         height: 4px; 
  14.         border-radius: 50%; 
  15.         background-color: #fff; 
  16.         box-shadow: 16px 0 0 #fff; 
  17.     } 
  18.     &::after { 
  19.         content: ''
  20.         margin-top: 42px; 
  21.         display: inline-block; 
  22.         border-width: 6px 10px 6px 10px; 
  23.         border-style: solid; 
  24.         border-color: transparent; 
  25.         border-top-color: rgb(68, 170, 59); 
  26.         transform: rotate(-147deg); 
  27.     } 
  28. // html 
  29. "wechat-icon mr-20"> 

实现对勾图标

这里也很简单,我们用伪元素的content里放置一个勾号,然后设置颜色大小就好啦:

  1. // less 
  2. .yes-icon { 
  3.     display: inline-flex; 
  4.     justify-content: center; 
  5.     align-items: center; 
  6.     width: 48px; 
  7.     height: 48px; 
  8.     background-color: green; 
  9.     border-radius: 50%; 
  10.     &::after { 
  11.         content: '✓'
  12.         color: #fff; 
  13.         font-size: 30px; 
  14.         font-weight: bold; 
  15.     } 
  16. // html 
  17. "yes-icon mr-20"> 

实现眼睛(一般用于网站访问量图标)

主要是做椭圆加上一个圆形的伪元素:

  1. .view-icon { 
  2.     display: inline-flex; 
  3.     justify-content: center; 
  4.     align-items: center; 
  5.     width: 58px; 
  6.     height: 36px; 
  7.     background-color: #06c; 
  8.     border-radius: 50%; 
  9.     &::after { 
  10.         content: ''
  11.         display: inline-block; 
  12.         width: 20px; 
  13.         height: 20px; 
  14.         border-radius: 50%; 
  15.         background-color: #fff; 
  16.     } 

导航图标

原理类似,主要思想是画两个三较形,用伪元素的三角形遮住主元素底部即可:

  1. .gps-icon { 
  2.     position: relative
  3.     display: inline-flex; 
  4.     justify-content: center; 
  5.     align-items: center; 
  6.     border-width: 30px 15px 30px 15px; 
  7.     border-color: transparent; 
  8.     border-style: solid; 
  9.     border-bottom-color: #06c; 
  10.     transform: translate(10px, -16px) rotate(32deg); 
  11.     &::after { 
  12.         position: absolute
  13.         bottom: -48px; 
  14.         content: ''
  15.         display: inline-block; 
  16.         border-width: 10px 38px 30px 38px; 
  17.         border-color: transparent; 
  18.         border-style: solid; 
  19.         border-bottom-color: #fff; 
  20.     } 

实现心形图标

原理就是用两个伪元素实现两个椭圆,旋转重合即可:

  1. .logo-x { 
  2.     position: relative
  3.     display: inline-flex; 
  4.     width: 50px; 
  5.     height: 50px; 
  6.     border-radius: 50%; 
  7.     background-color: rgb(212, 73, 17); 
  8.     &::after { 
  9.         position: absolute
  10.         content: ''
  11.         left: 10px; 
  12.         top: 12px; 
  13.         display: inline-block; 
  14.         width: 20px; 
  15.         height: 30px; 
  16.         border-radius: 50%; 
  17.         background-color: #fff; 
  18.         transform: rotate(135deg); 
  19.     } 
  20.     &::before { 
  21.         position: absolute
  22.         content: ''
  23.         right: 10px; 
  24.         top: 12px; 
  25.         display: inline-block; 
  26.         width: 20px; 
  27.         height: 30px; 
  28.         border-radius: 50%; 
  29.         background-color: #fff; 
  30.         transform: rotate(-135deg); 
  31.     } 

ps图标

这个也是用伪元素,一个伪元素用来做文字图形,一个用来做遮罩,来形成伪立体感:

  1. .logo-ps { 
  2.     position: relative
  3.     display: inline-flex; 
  4.     justify-content: center; 
  5.     align-items: center; 
  6.     width: 50px; 
  7.     height: 50px; 
  8.     border-radius: 8px; 
  9.     background-color: rgb(15, 102, 184); 
  10.     &::before { 
  11.         position: absolute
  12.         content: ''
  13.         display: inline-block; 
  14.         width: 50px; 
  15.         height: 40px; 
  16.         background-color: rgba(255, 255, 255, .1); 
  17.     } 
  18.     &::after { 
  19.         position: absolute
  20.         content: 'PS'
  21.         font-size: 24px; 
  22.         display: inline-block; 
  23.         color: #fff; 
  24.     } 

实现气泡对话框

和微信图标类似:

  1. .logo-pp { 
  2.     display: inline-block; 
  3.     width: 150px; 
  4.     height: 50px; 
  5.     border-radius: 8px; 
  6.     background-color: rgb(68, 170, 59); 
  7.     &::before { 
  8.         content: '等你下课哦!'
  9.         margin-top: 14px; 
  10.         margin-left: -33px; 
  11.         position: absolute
  12.         color: #fff; 
  13.     } 
  14.     &::after { 
  15.         content: ''
  16.         margin-top: 42px; 
  17.         display: inline-block; 
  18.         border-width: 6px 10px 6px 10px; 
  19.         border-style: solid; 
  20.         border-color: transparent; 
  21.         border-top-color: rgb(68, 170, 59); 
  22.         transform: rotate(-147deg) translate(-12px, 6px); 
  23.     } 

由于篇幅原因,其他的图标就不一一实现了,原理都类似,笔者之前曾利用这个方案做过一套100个图标的库,成功应用于各个项目中,由于体积小不会造成额外请求,所以更加实用,但更复杂的图形就为了方便还是建议用字体图标或者svg,base64等。

 

来源:趣谈前端内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯