说到现在的公司项目，相信不少公司的前端都是一团乱麻，不仅仅是因为js没有框架用，css也是不用框架，这样就导致了项目如果需要是升级或者需要维护的时候就特别的困难。
最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。
首先我们在整理样式之前，必须得有一个自己团队的规范。
思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。。
前面说了一堆费话，下面就简单点来介绍一下我整理的图标（全部用css来实现的）。
立即学习“前端免费学习笔记（深入）”；
css没有继承、多态等，所以为了write less ,do more就不得不想尽各种方法（我们自己规定凡是公共的、组件级别的样式全部以u-开头）。
我这里因为写所有标签的样式名都是以u-icon开头，所以写了如下样式，这样的话所有的以u-icon开头的全部都应用了如下三个样式，你想如果你有100个u-icon的样式那就省去了你300行代码呀！
[class^="u-icon"]{display: inline-block;color: #fff;vertical-align: middle;}手机上的切换标签html代码如下：
登录后复制
页面显示效果如下：
css样式代码：
/*手机上的切换标签*/.u-icon-toggle{position: relative;width: 60px;height: 30px;border-radius: 30px;box-shadow: 0 0 0 1px #e5e5e5;}/*因为这里可能会在父元素上加on 也可能在子元素上加on 所以*/.on.u-icon-toggle, .on .u-icon-toggle{box-shadow: 0 0 0 1px #4089e8;background-color: #4089e8;}.u-icon-toggle i{position: absolute;top: 0;left: 0;width: 30px;height: 30px;-webkit-box-shadow: 0 0 2px #bbb;border-radius: 100%;background-color: #fff;-webkit-transition: 300ms linear;-webkit-transform: translate3d(0,0,0);}.on.u-icon-toggle i, .on .u-icon-toggle i{-webkit-transform: translate3d(30px,0,0);}各种点（空心点、实心点、蓝色点、橙色点）html代码如下：页面显示效果如下：用css3实现各种图标效果 css样式代码：.u-icon-pointB, .u-icon-pointO{width: 6px;height: 6px;margin: 0 3px;border-radius: 100%;/*圆角为100%就实现圆的效果*/box-shadow: 0 0 0 1px #6bb5ff;}/*机票筛选界面橙色点icon*/.u-icon-pointO{background-color: #fff;box-shadow: 0 0 0 1px #ff5d1d;}/*蓝色点icon*/.cur.u-icon-pointB,.cur .u-icon-pointB{background-color: #6bb5ff;/*如果背景和boder颜色不一致 则为空心圆*/}.cur.u-icon-pointO,.cur .u-icon-pointO{background-color: #ff5d1d;}箭头html代码如下：页面显示效果如下：用css3实现各种图标效果 css样式代码：.u-icon-arr{position: absolute;top: 50%;right: 15px;width: 8px;height: 8px;margin-top: -2px;border-style: solid;border-width: 2px 2px 0 0;border-color: #ababab;-webkit-transform-origin: 75% 25%;-webkit-transform: rotateZ(45deg);-webkit-transition: 100ms ease-in .1s;transition: 100ms ease-in .1s;}
登录后复制
css3做出图标效果的教程就是这么多了，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
CSS的编码怎么转换
CSS的编码怎么转换
CSS的编码怎么转换
以上就是怎样用css3做出图标效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121398.html
