本篇文章给大家谈谈logo在线制作网站源码分享，以及logo在线制作免费下载对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。
预备知识
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有：
::first-letter第一个字母的样式::first-line首行文字的样式::before元素头部添加的修饰::after元素尾部添加的修饰::placeholderinput的占位符样式::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样式为一条线并进行布局定位：
//less\n.arrow{\nposition:relative;\ndisplay:inline-block;\nline-height:0;\nbackground-color:ccc;\n}\n}\n//html\n<spanclass=”arrowarrow-horright”></span>\n
这样就实现了一个指向右的箭头，我们用类似的方法也可以实现左箭头，上下箭头，实现双向箭头只需要加一个::after伪类并做适当定位就好了。
实现搜索图标
实现搜索图标实际上只需要一个圆和一根线，然后我们会用transform：ratate来实现角度倾斜，具体实现如下：
//less\n.search{\nposition:relative;\ndisplay:inline-block;\nwidth:12px;\nheight:12px;\nborder-radius:50%;\nborder:1pxsolidccc;\n}\n}\n//html\n<spanclass=”search”></span>\n
实现头像
实现头像我们要利用before和after伪元素，分别做人物头部和身体，身体我们会用css画一个椭圆来做：
//less\n.dot-pan{\nposition:relative;\ndisplay:inline-flex;\nwidth:60px;\nheight:60px;\nline-height:0;\nalign-items:center;\nborder-radius:50%;\nbackground-color:fff;\n}\n&::after{\ncontent:”;\ndisplay:inline-block;\nwidth:20px;\nheight:20px;\nflex-shrink:0;\nborder-radius:50%;\nbackground-color:06c;\n&::before{\ncontent:”;\nposition:absolute;\ndisplay:inline-block;\nwidth:12px;\nheight:12px;\nborder-radius:50%;\nleft:50%;\ntop:50%;\ntransform:translate(-50%,-50%);\nbackground-color:06c;\n}\n}\n//html\n<spanclass=”locate-iconmr-20″></span>\n
实现微信图标
图中2个眼睛主要是用到一个伪元素加上box-shadow来实现，这样可以节约一个伪元素用来做小尾巴，至于如何实现不同形状的三角形，如果有不懂的可以和我交流，具体实现如下：
//less\n.wechat-icon{\ndisplay:inline-block;\nwidth:50px;\nheight:50px;\nborder-radius:50%;\nbackground-color:rgb(68,170,59);\n&::before{\ncontent:”;\nmargin-top:14px;\nposition:absolute;\nwidth:4px;\nheight:4px;\nborder-radius:50%;\nbackground-color:fff;\n}\n&::after{\ncontent:”;\nmargin-top:42px;\ndisplay:inline-block;\nborder-width:6px10px6px10px;\nborder-style:solid;\nborder-color:transparent;\nborder-top-color:rgb(68,170,59);\ntransform:rotate(-147deg);\n}\n}\n//html\n<spanclass=”wechat-iconmr-20″></span>\n
实现对勾图标
这里也很简单，我们用伪元素的content里放置一个勾号，然后设置颜色大小就好啦：
//less\n.yes-icon{\ndisplay:inline-flex;\njustify-content:center;\nalign-items:center;\nwidth:48px;\nheight:48px;\nbackground-color:green;\nborder-radius:50%;\n&::after{\ncontent:’?’;\ncolor:06c;\nborder-radius:50%;\n&::after{\ncontent:”;\ndisplay:inline-block;\nwidth:20px;\nheight:20px;\nborder-radius:50%;\nbackground-color:06c;\ntransform:translate(10px,-16px)rotate(32deg);\n&::after{\nposition:absolute;\nbottom:-48px;\ncontent:”;\ndisplay:inline-block;\nborder-width:10px38px30px38px;\nborder-color:transparent;\nborder-style:solid;\nborder-bottom-color:fff;\ntransform:rotate(135deg);\n}\n&::before{\nposition:absolute;\ncontent:”;\nright:10px;\ntop:12px;\ndisplay:inline-block;\nwidth:20px;\nheight:30px;\nborder-radius:50%;\nbackground-color:fff;\n}\n}\n
实现气泡对话框
和微信图标类似：
.logo-pp{\ndisplay:inline-block;\nwidth:150px;\nheight:50px;\nborder-radius:8px;\nbackground-color:rgb(68,170,59);\n&::before{\ncontent:’等你下课哦！’;\nmargin-top:14px;\nmargin-left:-33px;\nposition:absolute;\ncolor:#fff;\n}\n&::after{\ncontent:”;\nmargin-top:42px;\ndisplay:inline-block;\nborder-width:6px10px6px10px;\nborder-style:solid;\nborder-color:transparent;\nborder-top-color:rgb(68,170,59);\ntransform:rotate(-147deg)translate(-12px,6px);\n}\n}\n
由于篇幅原因，其他的图标就不一一实现了，原理都类似，笔者之前曾利用这个方案做过一套100个图标的库，成功应用于各个项目中，由于体积小不会造成额外请求，所以更加实用，但更复杂的图形就为了方便还是建议用字体图标或者svg，base64等。
来源：https://mp.weixin.qq.com/s/PxP62LlEl0jB7cVAPMjXyg
作者：趣学前端
关于logo在线制作网站源码分享，logo在线制作免费下载的介绍到此结束，希望对大家有所帮助。