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

今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。

创新互联从2013年开始，是专业互联网技术服务公司，拥有项目网站制作、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元西安做网站,已为上家服务,为西安各地企业和个人服务,联系电话:18980820575

预备知识

伪元素

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

  • ::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样式为一条线并进行布局定位：

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

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

实现搜索图标

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

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

实现头像

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

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

实现地点图标

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

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

实现微信图标

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

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

实现对勾图标

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

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

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

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

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

导航图标

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

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

实现心形图标

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

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

ps图标

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

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

实现气泡对话框

和微信图标类似：

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

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

网页标题：前端:使用纯css实现超实用的图标库（附源码)
网页网址：http://www.shufengxianlan.com/qtweb/news48/262898.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸建站知识

同城分类信息

网络推广公司　　 　成都翻译公司　　 　成都网站设计　　 　证企宝　　 　网站收录　　 　宜宾网站设计　　 　梦港之夜　　 　崇州搬家公司　　 　绵阳服务器托管　　 　腾讯免备案空间　　 　seo关键词优化　　 　巴中倍辉科技　　 　成都logo设计公司　　 　南充做网站　　 　绵竹网站建设　　 　网站制作　　 　成都手机网站报价　　 　网站方案　　 　四川网站建设　　 　成都添翼二手车