实现下图的加号效果：

若想实现这个效果， 只需一个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样式，用他的一句话来说就是为后来者造福。

首先我们在整理样式之前，必须得有一个自己团队的规范。

思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。。

前面说了一堆费话，下面就简单点来介绍一下我整理的图标(全部用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制作图标，不外乎通过形变、使用色块拼接，以及二者结合使用。而形变我们可以使用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雪碧图做逐帧也行啊。欢迎大家多多交流，相互学习~~