css3加号图标_CSS3实现图标变换效果

一个铁的法则，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雪碧图做逐帧也行啊。欢迎大家多多交流，相互学习~~