用css3实现各种图标效果（1）
公共样式
应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是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代码如下：
<span class="u-icon-toggle"><i></i></span>
<span class="u-icon-toggle on"><i></i></span>
页面显示效果如下：
css样式代码：
/*手机上的切换标签*/
.u-icon-toggle
{
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
box-shadow: 0 0 0 1px #e5e5e5;
} .on.u-icon-toggle, .on .u-icon-toggle/*因为这里可能会在父元素上加on 也可能在子元素上加on 所以*/
{
box-shadow: 0 0 0 1px #4089e8;
background-color: #4089e8;
} .u-icon-toggle i
{
position: absolute;
top:;
left:;
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);
}
中英切换标签样式
css样式代码：
/*中英切换toggle -*/
.u-icon-toggleEn
{
position: relative;
width: 46px;
height: 22px;
border-radius: 30px;
background-color: #67a5e2;
box-shadow: 0 0 1px 1px #67a5e2;
} .u-icon-toggleEn i
{
position: absolute;
top:;
left:;
width: 22px;
height: 22px;
-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-toggleEn i
{
-webkit-transform: translate3d(23px,0,0);
} .u-icon-toggleEn .ch, .u-icon-toggleEn .en
{
position: absolute;
font-size: 12px;
z-index:;
line-height:22px;
} .u-icon-toggleEn .ch
{
left: 4px;
color: #67a5e2;
} .on.u-icon-toggleEn .ch
{
color: #fff;
} .u-icon-toggleEn .en
{
right: 5px;
color: #fff;
} .on.u-icon-toggleEn .en
{
color: #67a5e2;
}
html代码如下：
页面显示效果如下：
<span class='u-icon-toggleEn'><span class='ch'>中</span><span class='en'>英</span><i></i></span>
<span class='u-icon-toggleEn on'><span class='ch'>中</span><span class='en'>英</span><i></i></span>
各种点（空心点、实心点、蓝色点、橙色点）
html代码如下：
<span class="u-icon-pointB cur"></span>
<span class="u-icon-pointB"></span>
<span class="u-icon-pointO"></span>
<span class="u-icon-pointO cur"></span>
页面显示效果如下：
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代码如下：
<span class="u-icon-arr"></span>
<span class="u-icon-arr u-icon-arrD"></span>
<span class="u-icon-arr u-icon-arrU"></span>
页面显示效果如下：
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);
}
航线
html代码如下：
<span class="u-icon-line">
<span class="u-icon-lineFltGray"></span>
</span> <span class="u-icon-line">
<span class="u-icon-lineFltTransit">经停</span>
</span>
页面显示效果如下：
css样式代码：
.u-icon-lineFltGray
{
background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/flight-icons.png?20141224) no-repeat 0 -39px/45px 150px;
width: 16px;
height: 16px;
}
/*航线中中转icon*/
.u-icon-lineFltTransit
{
position: absolute;
top: 50%;
left: 50%;
width: 24px;
margin-left: -12px;
padding-top: 5px;
color: #2181f7;
font-size: 10px;
text-align: center;
} .u-icon-lineFltTransit em
{
position: absolute;
top: -16px;
width: 66px;
margin-left: -21px;
color: #666;
} .u-icon-lineFltTransit::before
{
position: absolute;
top:;
left: 50%;
width: 5px;
height: 5px;
margin-top: -2px;
margin-left: -3px;
border: 1px solid #2181f7;
-webkit-border-radius: 5px;
border-radius: 5px;
content: "";
}
两种不同方式实现的warning
html代码如下：
<span class="u-icon-warningO">!</span>
<span class="u-icon-warningB"></span>
页面显示效果如下：
css样式代码：
/*橙色warning icon*/
.u-icon-warningO
{
position: absolute;
top: 6px;
left: 10px;
width: 16px;
height: 16px;
line-height: 18px;
border-radius: 100%;
background: #ff9000;
font-size: 13px;
font-weight: bold;
text-align: center;
}
/*蓝色warning tip icon*/
.u-icon-warningB
{
position: relative;
width: 20px;
height: 20px;
border-color: #ed8b85;
border-radius: 100%;
background-color: #56a2ed;
font-size: 14px;
} .u-icon-warningB:after
{
position: absolute;
top:;
left: 6px;
line-height: 1.5;
font-weight: bold;
font-size: 14px;
content: 'i';
}
大小不一的radio
html代码如下：
<span class="u-icon-radioLB on"></span>
<span class="u-icon-radioLB off"></span>
<span class="u-icon-radioSB"></span>
<span class="u-icon-radioLO off"></span>
<span class="u-icon-radioLO on"></span>
页面显示效果如下：
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;
}
各种不同的checkbox
html代码如下：
<span class="u-icon-checkboxO_filter"></span>
<span class="u-icon-checkboxO_filter checked"></span>
<span class="u-icon-checkboxO checked"></span>
<span class="u-icon-checkboxO"></span>
<span class="u-icon-checkboxB checked"></span>
<span class="u-icon-checkboxB"></span>
页面显示效果如下：
css样式代码：
.u-icon-checkboxO
{
position: absolute;
top: 20px;
right: 15px;
width: 14px;
height: 14px;
border: 1px solid #dbdbdb;
content: " ";
} .checked.u-icon-checkboxO, .u-icon-radioSO.on,.checked .u-icon-checkboxO ,.on .u-icon-radioSO
{
width: 15px;
height: 15px;
border: none;
background-color: #ff5d1d;
}
/*小的橙色radio*/
.u-icon-radioSO.on,.on .u-icon-radioSO
{
position: absolute;
top: 20px;
right: 16px;
border-radius: 100%;
} .checked.u-icon-checkboxO::after, .u-icon-radioSO.on:after,.checked .u-icon-checkboxO::after, .on .u-icon-radioSO:after
{
position: absolute;
content: '';
} .u-icon-radioSO.on:after,.on .u-icon-radioSO:after
{
left: 4px;
top: 2px;
width: 4px;
height: 7px;
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
} .u-icon-checkboxO.on::after,.on .u-icon-checkboxO::after
{
width: 9px;
height: 4px;
top: 1px;
right:;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-40deg) translate(-3px,1px);
transform: rotate(-40deg) translate(-3px,1px);
} .u-icon-checkboxB
{
position: relative;
width: 19px;
height: 19px;
border: 1px solid #999;
} .u-icon-checkboxB.checked,
.checked .u-icon-checkboxB
{
border-color: #3e74b9;
} .u-icon-checkboxB.checked::after,
.checked .u-icon-checkboxB::after
{
position: absolute;
top: 3px;
left: 2px;
width: 12px;
height: 6px;
border: 2px solid #3e74b9;
border-width: 0 0 2px 2px;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
content: "";
} .u-icon-checkboxO_filter
{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #fff;
margin-left: 5px;
vertical-align: text-bottom;
position: relative;
}
.checked.u-icon-checkboxO_filter,.checked .u-icon-checkboxO_filter
{
border-color: #e5a64c;
}
.checked.u-icon-checkboxO_filter::before,.checked .u-icon-checkboxO_filter::before
{
width: 14px;
height: 6px;
content: " ";
display: inline-block;
border-left: 1px solid #e5a64c;
border-bottom: 1px solid #e5a64c;
-webkit-transform: rotate(-40deg) translate(7px,-4px);
transform: rotate(-40deg) translate(7px,-4px);
position: relative;
z-index:;
}
.checked.u-icon-checkboxO_filter::after,.checked .u-icon-checkboxO_filter::after
{
content: " ";
width: 4px;
height: 9px;
display: inline-block;
background-color: #3b4b58;
position: absolute;
top: -1px;
right: -1px;
}
详情（也就是三横线）
html代码如下：
<span class="u-icon-detail"><i></i></span>
页面显示效果如下：
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: '';
}
未完待续（如果大家有更好的方法来实现，不用图片，可以麻烦与我交流一下，谢谢！）
如果您觉得本篇博文对您有所收获，觉得小女子还算用心，请点击右下角的 [推荐]，谢谢！
用css3实现各种图标效果（1）的更多相关文章
- 用css3实现各种图标效果
原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最 ...
- 用css3实现各种图标效果（2）
写在前面 写的一模一样的css样式,结果却导致原来出来不一样的效果图. 用chrome的开发者工具查看,比较起来还是一模一样的css样式,可为什么会出现不一样的placeholder效果呢?一个白色粗 ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
随机推荐
- 在win8（win8.1）电脑上安装IIS，配置web服务器，发布网站
1.IIS安装: 打开控制面板——程序和功能——启用或关闭Windows功能——找到(Windows功能下)下的(Internet Infornation Services)把Web 管理工具和万维网 ...
- js如何判断一个数组
typeof [] 为一个"object" 不能通过此方法判断一个数组 方法 1.instanceof方法,这个方法用的比较多. 2.这个是es5以后推荐的方法,Object.pr ...
- Android之Activity跳转
简述 如果把每个activity看成一个页面的话,那么activity之间的跳转和页面的之间的跳转基本上是一样的.首先需要监听一个事件,当这个事件发生的时候,就进行跳转.html中有个<a sr ...
- Unix 复制文件至指定目录
cp /gaps/log/20160504/bxdx_20160504.log.Z /home 将/gaps/log/20160504/bxdx_20160504.log.Z 文件复制到home路 ...
- 【Python】[函数] 调用与定义
1.数据类型转换 int(),float(),str(),bool('1')2.定义函数使用 def关键字,依次写出 函数名.括号.括号中的参数.冒号,然后在缩进体中写函数内容 例子 求绝对值的函数 ...
- 关于出现 org.apache.commons.lang.exception.NestableRuntimeException的解决方法
最近做服务端和客户端之间的访问,出现了 org.apache.commons.lang.exception.NestableRuntimeException等状况.实在令人头大,翻到了一个很好的帖子说 ...
- “Ceph浅析”系列之二——Ceph概况
本文将对Ceph的基本情况进行概要介绍,以期读者能够在不涉及技术细节的情况下对Ceph建立一个初步印象. 1. 什么是Ceph? Ceph的官方网站Ceph.com上用如下这句话简明扼要地定义了Cep ...
- Gson解析json数据
1.解析单个对象 JSON字符串如下 [ { "formatDate":"2015-10-28", "date":"2015\u5 ...
- openvpn的部署
http://www.gaohuirong.cn/openvpn/2016/04/12/linux-install-openvpn.html
- lightoj 1074 spfa判断负环
Extended Traffic Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Sub ...