用css3实现各种图标效果

最新推荐文章于 2024-09-04 15:49:32 发布
最新推荐文章于 2024-09-04 15:49:32 发布
阅读量962 收藏
点赞数
分类专栏： html/css javascript

  • 详情（也就是三横线）
  • 公共样式

    应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是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: 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);
}
    复制代码
    中英切换标签样式

    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>
    各种点（空心点、实心点、蓝色点、橙色点）

    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: 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: "";
    }
    复制代码
    两种不同方式实现的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: 0;
    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: 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-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: '';
}
    复制代码

qq_27278679
关注
专栏目录
css3动画图标效果
10-31
css3动画图标效果 css3动画图标效果 css3动画图标效果
用css3实现各种图标效果（1）
weixin_34050519的博客
05-27 583
公共样式 应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。 最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。 首先我们在整理样式之前，必须得有一个自己团队的规范。 思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路...
CSS创意品牌图标展示特效与布局实现
最新发布
weixin_32999557的博客
09-04 789
本文还有配套的精品资源，点击获取 简介：CSS，作为网页设计的核心技术，提供了丰富的样式控制和布局选项。本文介绍了一个通过CSS创建的品牌图标展示特效代码，特别适用于电子商务平台。通过利用Flexbox或Grid布局，实现了响应式和动态的设计。使用伪类选择器、过渡效果和圆形设计元素，使得品牌图标在用户交互时能够展示出动态的悬停效果。同时，附加的使用帮助和资源链接为开发者提供...
css3 图标效果,css3图标_纯CSS3图标旋转效果代码
weixin_39819576的博客
08-03 393
摘要 腾兴网为您分享:纯CSS3图标旋转效果代码，中英翻译，中意在线，中国知网，余额宝等软件知识，以及真三国无双7日语补丁，手机房源采集，plustoken钱包，dj火电影，指南针炒股软件，美团商家登录，sola病毒专杀,快速启动软件，传播易，迷你表情包，宝贝计划2，掌上理财，库，狐小狸，学趣国际英语等软件it资讯，欢迎关注腾兴网。CSS3的功能比起现在我们用的css是强大了许多了，我们现在可以使...
CSS3实现32种基本图形
細水、長流√的专栏
02-23 639
CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形，十二角形。 网页代码中用到...
css3实现wifi信号逐渐增强效果实例
09-24
在本文中，我们将探讨如何使用CSS3来创建一个模拟WiFi信号逐渐增强的视觉效果。这个效果通常用于表示网络连接强度，通过多个环形线条颜色的变化，呈现出信号从弱到强的过程。以下是一些关键的CSS3概念和技术，它们在...
jquery+css3实现图标震动效果.zip
09-25
在本压缩包"jquery+css3实现图标震动效果.zip"中，包含了一个使用jQuery和CSS3技术实现的图标震动特效。这个特效适用于那些希望在网页中添加动态视觉元素的开发者，能够为用户带来更生动、有趣的交互体验。下面将...
css3实现社交图标旋转 css3实现社交图标旋转效果网页特效.zip
11-17
本知识点主要关注如何使用CSS3来实现社交图标的旋转效果。 首先，让我们了解一下CSS3中的关键帧动画（@keyframes）和过渡（transition）这两个核心概念。关键帧动画允许我们定义一个动画的起始状态和结束状态，以及...
CSS3实现兴趣图谱效果 CSS3实现兴趣图谱效果网页特效.zip
11-17
这个压缩包“CSS3实现兴趣图谱效果 CSS3实现兴趣图谱效果网页特效.zip”包含了使用CSS3技术创建这种效果的相关资源，适合前端开发者学习和应用。 **CSS3简介** CSS3是层叠样式表（Cascading Style Sheets）的第三个...
css（图标效果，层级，透明效果）
fdhfhj的博客
11-29 467
图标字体，层级，透明效果
使用CSS设置图标
CodeNexus的博客
09-23 642
本文将介绍几种常见的CSS技术，用于设置图标，并提供相应的源代码示例。您可以根据自己的需求选择其中一种或多种方法，并根据需要调整样式属性，以实现所需的效果。CSS伪元素是一种特殊的CSS选择器，允许您在元素的内容前面或后面插入额外的内容。您可以使用伪元素来设置图标，而无需在HTML中添加额外的标记。另一种常见的设置图标的方法是使用CSS的背景图像属性。接下来，您可以在页面中的任何元素上使用相应的CSS类来显示图标。属性指定了要插入的内容，可以使用Unicode字符编码或特定的字体图标类。
【css】实现图标提示效果
richest_qi的博客
08-04 993
absolute元素的包含块，是指 离它最近的 position不为static的祖先元素，如果没有这样的祖先元素，那么包含块就是根元素html。 left/top/bottom/right都是相对于包含块而言的。 <body> <div class="container"> <span class="icon icon-delete" data-title="删除"></span> </div> </body> 添加图标
文字和icon组件显示在同一行
weixin_44277207的博客
08-28 1590
文字和icon组件显示在同一行
css3 - 图标元素动画效果2 - 动画无限循环、循环一定次数、反向动画
热门推荐
erdouzhang
05-08 2万+
在线演示鼠标悬停，图标会一直不停旋转。 如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。图标文件引入：<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">html：<div class="close"><i class="fa fa-close
酷炫的css3图标loading动画效果代码
weixin_30810583的博客
07-21 470
css3 svg图标制作环形loading加载动画特效 绿色的css3动画加载图标代码 css3加载动画制作loading加载Android动画效果 jQuery css3预加载动画制作css3动画图标页面加载效果 css3加载动画特效制作css3 win8加载动画特效 css3加载动画效果制作loading动画效果代码 ...
【CSS】用CSS绘制图标（图标大全）
码婆Doph
11-25 2万+
转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！ 技艺不精，若有纰漏，还请不吝指出。 暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac
Uni使用iconfont图标或者自定义图标
well2049的博客
12-01 7936
首先到阿里巴巴图标矢量库里面掉选自己喜欢的图标收藏到自己项目里面的。 注意事项： 1，修改项目内的图标字体名称（iconfont是uni的关键字暂不能用）。 2，使用网络字体。 项目使用 1，拷贝iconfont.css 文档到项目中，并修改引入的字体路径： @font-face {font-family: "eosfont"; src: url('https://at.alicdn.com...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值