用css3实现各种图标效果

原文:用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;
}

手机上的切换标签

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

    <span class="u-icon-toggle"><i></i></span>
    <span class="u-icon-toggle on"><i></i></span>

页面显示效果如下:

中英切换标签样式

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: 0;
    left: 0;
    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: 2;
    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>

页面显示效果如下:

各种点(空心点、实心点、蓝色点、橙色点)

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-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-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-arr"></span>
    <span class="u-icon-arr u-icon-arrD"></span>
    <span class="u-icon-arr u-icon-arrU"></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: 0;
        left: 50%;
        width: 5px;
        height: 5px;
        margin-top: -2px;
        margin-left: -3px;
        border: 1px solid #2181f7;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        content: "";
    }

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>

页面显示效果如下:

两种不同方式实现的warning

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: 0;
    left: 6px;
    line-height: 1.5;
    font-weight: bold;
    font-size: 14px;
    content: ‘i‘;
}

html代码如下:

    <span class="u-icon-warningO">!</span>
    <span class="u-icon-warningB"></span>

页面显示效果如下:

大小不一的radio

css样式代码:

.on .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,.u-icon-radioSB
{
    background: #4288E3;
}

.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: " ";
}

.on .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代码如下:

    <span class="on"><span class="u-icon-radioLB"></span></span>
    <span class="u-icon-radioSB"></span>
    <span class="u-icon-radioLO"></span>
    <span class="u-icon-radioLO on"></span>

页面显示效果如下:

各种不同的checkbox

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: 0;
    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: 2;
}
.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-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-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: ‘‘;
}

html代码如下:

<span class="u-icon-detail"><i></i></span>

页面显示效果如下:

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

如果您觉得本篇博文对您有所收获,觉得小女子还算用心,请点击右下角的 [推荐],谢谢!

时间: 2024-10-06 14:27:11

用css3实现各种图标效果的相关文章

用css3实现各种图标效果(2)

原文:用css3实现各种图标效果(2) 写在前面 写的一模一样的css样式,结果却导致原来出来不一样的效果图. 用chrome的开发者工具查看,比较起来还是一模一样的css样式,可为什么会出现不一样的placeholder效果呢?一个白色粗体,一个灰色正常字体. 找了老半天找不到原因 后来才发现是我同事写的框架css里面代码的一句话影响到了 ::-webkit-input-placeholder { color: #a4afc6; } 可是为什么在chrome控制台看不到这句代码呢?请教了一番同

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

CSS3实现的菱形效果代码实例

CSS3实现的菱形效果代码实例:本章节分享一段代码实例,它使用CSS3实现了菱形效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <

分享jQuery&amp;CSS3导航标签切换效果

jquery+css3完成的菜单导航特效 引入代码: <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="t

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

3D Grid Effect – 使用 CSS3 制作网格动画效果

今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的??.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

css3控制多重动画效果

今天看到一个类似于门窗开关效果.想着用css3实现,当然js是可以必须能够实现的.我主要想体验一把css3的神奇. 0102 01图片缩小,缩小到看不到之后,出现02图片放大的效果. 实现原理:用一个外层div来触发hover效果,里面套两个图片div, 分别为图一和图二 主要使用css3的transform和transition效果,而且比较重点的是transition-delay延时属性. 具体代码 html-------------------------- <div id="out

基于css3的轮播效果

花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framework动画效果实现轮播效果以及之前提到的input:checked伪类来实现轮播的控制.在轮播的控制上不可避免的使用了js,一直想写出优雅的js代码,在看了自己写的代码之后发现自己还有很大的提升空间,也许该找个机会去阅读优秀框架的源代码了. 当然也借鉴了网上很多资料,有问题的是在ie下完全没有效果,对