用css3实现各种图标效果

公共样式

应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是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代码如下：

页面显示效果如下：

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代码如下：

页面显示效果如下：

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;

}

/*箭头朝底 down*/

.u-icon-arrD{

-webkit-transform: rotateZ(135deg);

}

/*箭头朝上 up*/

.u-icon-arrU{

-webkit-transform: rotateZ(-45deg);

}

大小不一的radio

html代码如下：

页面显示效果如下：

css样式代码：

.u-icon-radioLB, .u-icon-radioLO,.u-icon-radioSB{

position: relative;

width: 24px;

height: 24px;

border-radius: 24px;

-webkit-border-radius: 24px;

}

.u-icon-radioSB{

width: 18px;

height: 18px;

border-radius: 18px;

}

.u-icon-radioLO{

right: 1px;

box-shadow: 0 0 1px #aaa;

background-color: #f8f8f8;

}

.on .u-icon-radioLB,.on.u-icon-radioLB,.u-icon-radioSB{

background: #4288E3;

}

.u-icon-radioLB.off {

background-color: #ECECEC;

}

.u-icon-radioLB.off::after {

border-color: #999;

}

.u-icon-radioLO::before{

position: absolute;

left: -15px;

top: -10px;

width: 50px;

height: 40px;

content: ” “;

}

.on.u-icon-radioLO,.on .u-icon-radioLO{

width: 24px;

height: 24px;

border-radius: 24px;

box-shadow: none;

background-color: #ff5d1d;

}

.on.u-icon-radioLO::after,.on .u-icon-radioLO::after{

position: absolute;

top: 3px;

right: 3px;

width: 14px;

height: 7px;

border-left: 2px solid #fff;

border-bottom: 2px solid #fff;

-webkit-transform: rotate(-45deg) translate(-3px,1px);

transform: rotate(-45deg) translate(-3px,1px);

content: ” “;

}

.u-icon-radioLB::after,.u-icon-radioSB::after{

position: absolute;

top: 4px;

left: 8px;

width: 6px;

height: 10px;

border-style: solid;

border-color: #fff;

border-width: 0 2px 2px 0;

-webkit-transform: rotateZ(45deg);

content: “”;

}

.u-icon-radioSB::after{

top: 3px;

left: 6px;

width: 4px;

height: 8px;

}

详情（也就是三横线）

html代码如下：

页面显示效果如下：

css样式代码：

.u-icon-detail{

width: 12px;

height: 10px;

padding: 19px 10px;

}

.u-icon-detail i{

display: block;

position: relative;

width: 12px;

height: 2px;

background-color: #ffa124;

}

.u-icon-detail i:before{

position: absolute;

top: 4px;

width: 12px;

height: 2px;

background-color: #ffa124;

content: ”;

}

.u-icon-detail i:after{

position: absolute;

top: 8px;

width: 7px;

height: 2px;

background-color: #ffa124;

content: ”;

}

各种删除按钮（不用图标只能css来实现）

html代码如下：

删除

删除

搜索更多

搜索更多

页面显示效果如下：

css样式代码：

.u-icon-sel{

position: relative;

-webkit-box-sizing: border-box;

width: 32%;

height: 32px;

line-height: 30px;

margin-bottom: 4px;

border: 1px solid #a4afc6;

border-radius: 3px;

color: #a4afc6;

text-align: center;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.u-icon-sel.on{

overflow: hidden;

border-color: #ff5d1d;

color: #000;

}

.u-icon-sel.on:before{

position: absolute;

right: 0;

bottom: 0;

width: 18px;

height: 18px;

background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/common-graphic37.png?20150423) no-repeat -23px -152px/150px 240px;

content: ”;

}

.u-icon-sel.more{

color: #6daeee;

}

.u-icon-deleteToggle{

width: 75px;

height: 45px;

line-height: 45px;

text-align: center;

}

.u-icon-deleteToggle.Blue{

background-color: #3e74b9;

}

.u-icon-deleteToggle.Orange{

background-color: #ff5d1d;

}

/*白色垃圾桶、灰色垃圾桶图标*/

.u-icon-trash,.u-icon-grayTrash{

background: url(images/common-graphic37.png) no-repeat 0 0/150px 240px;

}

.u-icon-trash{

background-position: 0 -84px;

width: 16px;

height: 18px;

}

.u-icon-grayTrash {

display: inline-block;

width: 12px;

height: 18px;

margin-right: 8px;

vertical-align: -2px;

background-position: -3px -178px;

}

/*不用任何图标实现删除icon效果*/

.u-icon-delete{

position: absolute;

bottom: 5px;

right: 0;

width: 40px;

height: 40px;

}

/*给before伪类设置一个默认背景色设置content*/

.u-icon-delete:before{

position: absolute;

top: 10px;

left: 10px;

width: 20px;

height: 20px;

border-radius: 20px;

background-color: #8e8e93;

content: ”;

}

/*给after伪类 -webkit-transform: rotate(-45deg);旋转 background-color: #e1e2e4;设置X的一边的颜色*/

.u-icon-delete:after{

position: absolute;

top: 19px;

left: 14px;

width: 12px;

height: 2px;

-webkit-transform: rotate(-45deg);

background-color: #e1e2e4;

content: ”;

}

/* -webkit-transform: rotate(45deg); 运用的特别巧秒*/

.u-icon-delete i{

position: absolute;

top: 19px;

left: 14px;

width: 12px;

height: 2px;

background-color: #e1e2e4;

-webkit-transform: rotate(45deg);

}

/*橙色背景中间一白色横杠的删除icon */

.u-icon-del{

position: relative;

width: 24px;

height: 24px;

border: 1px solid #ff5d1d;

-webkit-border-radius: 24px;

border-radius: 24px;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

background-color: #ff5d1d;

}

.u-icon-del.on,.on .u-icon-del{

-webkit-transform: rotateZ(90deg);

}

/*这里的background-color: #fff;和 content: “20”;实现白色横杠*/

.u-icon-del::after{

position: absolute;

top: 10px;

left: 4px;

width: 16px;

height: 4px;

background-color: #fff;

content: “20”;

}

.u-icon-radioDelete{

position: relative;

width: 24px;

height: 24px;

border: 1px solid #8AADD8;

-webkit-border-radius: 24px;

border-radius: 24px;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

}

.u-icon-radioDelete::after{

position: absolute;

top: 11px;

left: 4px;

width: 16px;

height: 2px;

background-color: #8AADD8;

color: #8AADD8;

content: “20”;

}

.u-icon-radioDelete.on,.on .u-icon-radioDelete{

-webkit-transform: rotateZ(90deg);

-ms-transform: rotateZ(90deg);

}

加加减减图标

html代码如下：

页面显示效果如下：

css样式代码：

/*加减标签*//*加标签icon*/

.u-icon-addS, .u-icon-addB{

width: 60px;

height: 40px;

}

/*加的大icon*/

.u-icon-addB{ position: relative;

top: 0;

right: 0;

}

/*加的小icon*/

.u-icon-addS{

position: relative;

color: #3B8FF8;

}

.u-icon-addS::before,.u-icon-addS::after, .u-icon-addB::before,.u-icon-addB::after{

position: absolute;

top: 20px;

left: 25px;

width: 12px;

content: “”;

}

.u-icon-addB::before, .u-icon-addB::after{

border-top: 1px solid #fff;

}

.u-icon-addS::before,.u-icon-addS::after{

border-top: 2px solid #3B8FF8;

}

.u-icon-addB::after,.u-icon-addS::after{

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

/*加、减按钮*/

.u-icon-plus, .u-icon-minus{

position: relative;

width: 30px;

height: 3px;

background-color: #a9b3c9;

box-shadow: 0 1px 1px #959bab inset;

border-radius: 3px;

}

.u-icon-plus.on, .u-icon-minus.on,.on.u-icon-plus::before,

.on .u-icon-plus,.on .u-icon-minus ,.on .u-icon-plus ::before{

background-color: #6daeee;

box-shadow: 0 1px 1px #6a9aca inset;

}

.u-icon-plus::before{

position: absolute;

left: 13px;

width: 3px;

height: 30px;

border-radius: 3px;

box-shadow: 1px 0 1px #959bab inset;

background-color: #a9b3c9;

-webkit-transform: translate(0,-13.5px);

transform: translate(0,-13.5px);

text-align: center;

content: “”;

}

一行被选中状态图标

html代码如下：

页面显示效果如下：

css样式代码：

.u-icon-checkTitle{

position: absolute;

top: 9px;

right: 13px;

width: 16px;

height: 16px;

border-radius: 100%;

background: #fff;

content: ”;

}

.u-icon-checkTitle::after{

position: absolute;

top: 2px;

right: 5px;

width: 4px;

height: 8px;

border-width: 0 2px 2px 0;

border-color: #ffa124;

border-style: solid;

-webkit-transform: rotate(45deg);

content: ”;

}

未完待续（如果大家有更好的方法来实现，不用图片，可以麻烦与我交流一下，谢谢！）

声明：本站部分文章内容及图片转载于互联、内容不代表本站观点，如有内容涉及侵权，请您立即联系本站处理，非常感谢！

用css3实现各种图标效果

相关推荐