精华内容
下载资源
问答
  • css加号图标
    千次阅读
    2021-02-01 01:07:15

    若想实现这个效果, 只需一个div元素即可搞定。需要用到css的为了before和after, 以及border特性。

    先设置一个div便签

    .add {

    border: 1px solid;

    width: 100px;

    height: 100px;

    color: #ccc;

    transition: color .25s;

    position: relative;

    }

    我们可以利用伪类before和其border-top来设置一个“横”:

    .add::before{

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    width: 80px;

    margin-left: -40px;

    margin-top: -5px;

    border-top: 10px solid;

    }

    注意我们使了绝对定位。

    参照上面,我们可以使用after伪类和border-bottom设置一个“竖”:

    .add::after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    height: 80px;

    margin-left: -5px;

    margin-top: -40px;

    border-left: 10px solid;

    }

    在加上hover伪类,设置鼠标悬浮上去的颜色:

    .add:hover {

    color: blue;

    }

    .....

    更多相关内容
  • 主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现下图的加号效果:若想实现这个效果, 只需一个div元素即可搞定。需要用到css的为了before和after, 以及border特性。先设置一个div便签再设置一个边框:.add {border: 1px solid;width: 100px;height: 100px;...

    实现下图的加号效果:

    若想实现这个效果, 只需一个div元素即可搞定。

    需要用到css的为了before和after, 以及border特性。

    先设置一个div便签

    再设置一个边框:

    .add {

    border: 1px solid;

    width: 100px;

    height: 100px;

    color: #ccc;

    transition: color .25s;

    position: relative;

    }

    此时边框是这样的:

    我们可以利用伪类before和其border-top来设置一个“横”:

    .add::before{

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    width: 80px;

    margin-left: -40px;

    margin-top: -5px;

    border-top: 10px solid;

    }

    注意我们使了绝对定位。 此时变成了这样:

    参照上面, 我们可以使用after伪类和border-bottom设置一个“竖”:

    .add::after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    height: 80px;

    margin-left: -5px;

    margin-top: -40px;

    border-left: 10px solid;

    }

    在加上hover伪类,设置鼠标悬浮上去的颜色:

    .add:hover {

    color: blue;

    }

    最终的样式:

    当鼠标悬浮上去是, 会变色:

    大家可以在这里查看效果:

    总结

    以上所述是小编给大家介绍的css实现“加号”效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • 公共样式应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难。最近领导决定花大时间整理一下css样式,用他的一...

    公共样式

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

    页面显示效果如下:

    中英

    中英

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

    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);

    }

    航线

    html代码如下:

    经停

    页面显示效果如下:

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

    !

    页面显示效果如下:

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

    页面显示效果如下:

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

    页面显示效果如下:

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

    页面显示效果如下:

    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实现图标变换效果

    2020-12-19 00:43:50
    一个铁的法则,CSS3制作图标,不外乎通过形变、使用色块拼接,以及二者结合使用。而形变我们可以使用scale、rotate、skew以及border组合实现,而色块拼接我们可以选择多个DOM元素(或伪元素)使用定位拼接,或者更巧妙...

    一个铁的法则,CSS3制作图标,不外乎通过形变、使用色块拼接,以及二者结合使用。而形变我们可以使用scale、rotate、skew以及border组合实现,而色块拼接我们可以选择多个DOM元素(或伪元素)使用定位拼接,或者更巧妙的使用background-image多背景图片,以及还有box-shadow多阴影等等。每个人在实际使用中可以根据自己的喜好和场景选择适合自己的实现方式。下面我就来跟大家介绍一下以上动画的实现方式。

    结构

    分析

    整个动画其实就是简单的从“加号”过渡为“箭头”。那么,首先我们需要做的就是使用以上结构先绘制出一个“加号”和一个“箭头”。

    “加号”的绘制方式有很多:图标、网页字体、元素十字交叉等等。但是观察动画过程,此例使用box-shadow。为什么呢?仔细观察可以发现“加号”的组成其实是由上、下、左、右四条线段拼合而成,而使用box-shadow可以一个属性同时设置水平的两条和同时设置垂直的两条,那么结合before和after两个伪元素便可以在不增加DOM结构的前提下得到所需的四条线段。

    “箭头”的原理类似,不同的是箭头由三条不同方向的线段组合,因此,我们需要考虑元素本身加上自身的before和after共同组成。

    结合上述DOM结构,我们可以这样设计:div.plus作为图标容器,实现定位以及限制图标大小,div.plus的before和after伪元素通过box-shadow绘制“加号”。div.item自身通过box-shadow绘制水平线段,div.item的before和after两个伪元素分别绘制左下和左上两条斜线段,共同组成“箭头”。

    .plus {

    position: relative;

    margin: 20px auto;

    width: 64px;

    height: 64px;

    border-radius: 50%;

    background-color: green;

    overflow: hidden;

    }

    .plus:before,

    .plus:after {

    position: absolute;

    content: '';

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    -webkit-transition: box-shadow .3s ease-out;

    transition: box-shadow .3s ease-out;

    background-color: #fff;

    -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px #fff;

    box-shadow: 0 0 0 2px #fff, 0 0 0 2px #fff;

    }

    .plus:before {

    width: 0;

    height: 24px;

    }

    .plus:after {

    width: 24px;

    height: 0;

    }

    .plus .item {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    -webkit-transition: box-shadow .3s ease-out;

    -o-transition: box-shadow .3s ease-out;

    transition: box-shadow .3s ease-out;

    background-color: #fff;

    width: 28px;

    height: 0;

    /*** 初始状态下箭头是不可见的,因此box-shadow应该投影到容器以外的区域* 将“-200px”修改为0,即可见*/

    -webkit-box-shadow: -200px 0 0 2px #fff;

    box-shadow: -200px 0 0 2px #fff;

    }

    .plus .item:before,

    .plus .item:after {

    float: right;

    content: '';

    width: 67.7777%;

    height: 100%;

    -webkit-transform-origin: top right;

    -moz-transform-origin: top right;

    -ms-transform-origin: top right;

    -o-transform-origin: top right;

    transform-origin: top right;

    background-color: #fff;

    /*** 初始状态下箭头是不可见的,因此box-shadow应该投影到容器以外的区域* 将“-200px”修改为0,即可见*/

    -webkit-box-shadow: -200px 0 0 2px #fff;

    box-shadow: -200px 0 0 2px #fff;

    -webkit-transition: box-shadow .3s ease-out;

    -o-transition: box-shadow .3s ease-out;

    transition: box-shadow .3s ease-out;

    }

    .plus .item:before {

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

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

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

    transform: rotate(-45deg);

    }

    .plus .item:after {

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    }

    动画

    上面看到的只是静态的两个图标,如何实现变幻才是我们的目的。仔细阅读上面的代码,在各个线段元素上均设置了 transition 属性,并且指定了过渡的属性为 box-shadow。因此,只需要在需要变幻的时候改变各个元素中 box-shadow 的偏移量终值即可触发CSS3过渡动画效果。

    如DEMO所示,鼠标进入图标区域“加号”即变“箭头”,因此我们使用:hover来实现动画控制,继续补充代码:

    .plus:hover:before {

    -webkit-box-shadow: 0 -200px 0 2px #fff, 0 200px 0 2px;

    box-shadow: 0 -200px 0 2px #fff, 0 200px 0 2px;

    }

    .plus:hover:after {

    -webkit-box-shadow: -200px 0 0 2px #fff, 200px 0 0 2px;

    box-shadow: -200px 0 0 2px #fff, 200px 0 0 2px;

    }

    .plus:hover .item {

    -webkit-box-shadow: -3px 0 0 2px #fff;

    box-shadow: -3px 0 0 2px #fff;

    }

    .plus:hover .item:before,

    .plus:hover .item:after {

    -webkit-box-shadow: -1px 0 0 2px #fff;

    box-shadow: -1px 0 0 2px #fff;

    }

    现在来看,此动画其实很简单,鼠标移入加号扩散出容器,箭头聚拢进入容器。

    最后,如今的WEB前端已经是“没有做不到,只有想不到”的境界,CSS3的动画局限很多,更具侵虐性和震撼力的实现方式还是SVG,当然Canvas虽然麻烦些还是可以做到,实在不行我用个png雪碧图做逐帧也行啊。欢迎大家多多交流,相互学习~~

    展开全文
  • CSS】用CSS绘制图标图标大全)

    万次阅读 多人点赞 2017-11-25 21:39:32
    加号按钮 .box{ width: 50px; height: 50px; background-color: white; border: 1px solid black; border-radius: 100%; outline: 10px solid black; outline-offset: -35px; cursor: pointer; }...
  • CSS语言:CSSSCSS确定* {box-sizing: border-box;}html,body {height: 100%;}body {margin: 0;background: #343838;}.button {position: absolute;width: 55px;height: 55px;background: #70975B;top: 50%;left: 50%...
  • 带框的加号(添加按钮) 鼠标悬浮时会高亮 三横(三道杠) 或 带圈点(双层圆点) 
  • 两个图标都加了hover状态和禁用状态效果 1、加号 通过定位以及::before和::after相结合实现 效果: .addBtn{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: #D4...
  • css写一个加号+

    2021-07-15 13:58:53
    参考的这篇文章 又修改了下: <view class="icon"></view> .icon{ width: 24rpx;... height: 24rpx;... 添加边框可以看到加号的位置在哪里*/ } .icon::before{ content: ''.
  • 原标题:一步步打造自己的纯CSS单标签图标库作者:深海鱼在掘金原文:https://juejin.im/post/5a1c21c1f265da430b7af6e5图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互、引导以及网页装饰等充当的...
  • CSS3 SVG手机底部图标导航栏是一款svg加号功能图标点击滑动展开更多图标代码。
  • 基本形状▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8▣ 9635 25A3标点,特殊符号« 171 00AB ...
  • css小图标i{display:inline-block;}/*三道杠*/.icon-threeline{width:60px;height:10px;/*双线边框和实线变宽的间距*/border-top:30px double #000;.../*实线变宽*/}/*加号图标*/.icon-add{width:60px;heig...
  • 使用css/svg直接在浏览器中绘制图标。方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面。你也能想到,一堆图标的雪碧图,修改维护会相当麻烦...
  • CSS3 加减号转换图标

    2021-01-17 16:04:08
    CSS语言:CSSSCSS确定.navicon-link {color: #fefefe;font: 2em/2.5em "Kite One";font-weight: 400; }.navicon-button {padding: 2.0625em 0.25em;transition: 0.25s;opacity: 0.9; }.navicon-button .navicon:...
  • 如题: 1.
  • css3实现各种小图标

    2021-03-07 18:19:33
    加号和减号图标html>标题.jia,.jian{width:15px;height:15px;background:#848484;border-radius:100%;position:relative;display:inline-block;}.jia:after,.jia:before,.jian:before{position:absolute;content:...
  • 每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦。当然你可以会想到用zoom、scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意。终于下定心思来...
  • 这是一款创意的CSS3 SVG手机移动端底部图标导航栏特效,点击加号功能图标滑动展开更多图标菜单选项。
  • 通常我们会通过字体图标来显示中间的加号,外层用一个div包裹即可;或者使用伪元素来模拟中间的一横一竖,这都比较麻烦。 其实我们可以直接使用div+css就可以实现。 轮廓属性outline outline属性是用来设置一个或多...
  • 展开全部(1)1、js方法,这是一般网站常用的方法。优点:兼容性好,易管理。...2、纯css方法:这是为了应付考试,掌握灵活性而用缺点:需要支持css3的浏览器,兼容性不佳。实现方法:利用css的伪类选择,将整个一...
  • 加号,减号: .deleteicon{width: 2.13rem;height: 2.13rem;background: #fff;border-radius: 100%; position: absolute;border: 1px solid #cbcbcc;} .deleteicon:before{position: absolute;content:'';width:1.6...
  • 由我创建并受版权保护的模块标有加号(+)。 + windows.js-所有功能的自定义脚本。 现在也维护任务栏时钟。 先决条件:jQuery,FileSaver.js,normalize.css jQuery jQuery UI-用于可拖动的窗口 真棒字体-用于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,141
精华内容 856
热门标签
关键字:

css加号图标