摘要：
　　这周在改公司的手机wap网站，其中有一个关于按钮的小特效(其实图片我现在都用iconfont来替代图片)。点击按钮时，几个子栏目旋转的同时以放射状展开。个人感觉还不错，所以分享给看官......

一、起因

这周开始改公司(窝窝宝)的手机wap网站了，然后有一个关于按钮的小特效。大致特效是这样的：如果看官看图片没有感觉的话，可以拿出手机扫码看动态的效果。精简版demo效果：点我在新窗口全屏观看

艺灵感觉这个效果还是比较不错的，所以分享给看官。

二、特效分析

还是跟以前一样，我们要先对效果进行分析下，要不然，根本无从下手啊！！！

分析：
1、初始状态时，只显示+号这个按钮；
2、当点击的时候，+号按钮进行一个顺时针旋转；
3、在旋转的同时，子栏目的三个按钮依次弹开并且是从小到大还带着点弹性簧的效果；
4、当再次点击+号时，回归默认状态。

在上面的分析过程中，我们的css3起着很重要的一部分！比如说：缩放scale、延时transition-delay、旋转rotate、动画类型cubic-bezier等等。

当然，除了css外，js也是有的哦！可不要忘记了：这个可是手机wap版的效果，手机上可不像电脑pc端那样有鼠标滑过这个状态。所以，我们的js就是控制点击事件的。

好了，不啰嗦了，我们码上见！

三、完整源码

3.1、html源码

<!--引入iconfont矢量图片相关css-->
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<!--按钮部分开始-->
<div class="css3-box" id="css3-box">
　<div class="css3-box-main"><i class="icon iconfont">&#xe6ac;</i></div>
　<a class="css3-bm_1"><i class="icon iconfont">&#xe6a2;</i></a>
　<a class="css3-bm_2"><i class="icon iconfont">&#xe67a;</i></a>
　<a class="css3-bm_3"><i class="icon iconfont">&#xe6bd;</i></a>
</div>

可能很多看官看到这里后会觉得奇怪：咦？怎么没有图片，&#x是什么鬼？？？

其实，这里应用的是iconfont矢量图标技术。iconfont是阿里巴巴旗下产品，详情请点击→→ICONFONT平台功能介绍

3.2、css样式

<style type="text/css">
/*按钮*/
.css3-box{width:1rem;height:1rem;position:relative;margin:5rem auto 0}
.css3-box-main,.css3-box a{width:1rem;height:1rem;line-height:1rem;border-radius:50%;background:#fc613e;color:#fff;text-align:center;position:absolute}
.css3-box .iconfont{font-size:0.42667rem;display:block;-webkit-transition:.4s ease-in;transition:.4s ease-in}
.css3-box-main{z-index:20}
.css3-box a{z-index:5;left:.05rem;top:0;-webkit-transform:scale(.001,.001);transform:scale(.001,.001)}
.css3-box.on a{-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:.4s cubic-bezier(.3,0.1,.15,2);transition:.3s cubic-bezier(.5,0.1,.15,2)}
.css3-box.on .css3-bm_1{left:-2rem;top:-1.48rem}
.css3-box.on .css3-bm_2{top:-3rem;-webkit-transition-delay:.1s;transition-delay:.1s}
.css3-box.on .css3-bm_3{left:2rem;top:-1.48rem;-webkit-transition-delay:.15s;transition-delay:.15s}
.css3-box.on .css3-box-main .iconfont{-webkit-transform:rotate(225deg);transform:rotate(225deg)}
</style>

最后是js了，毕竟我们点击的时候需要去触发事件。

3.3、js

<script type="text/javascript">
　window.onload=function(){
　　var box=document.getElementById("css3-box"),
　　i=0;
　　box.onclick=function(){
　　　if(i==1){
　　　　/*点击时，如果是激活状态，去除on*/
　　　　this.className='css3-box';
　　　　i=0;
　　　}else{
　　　　/*否则，添加on*/
　　　　this.className='css3-box on';
　　　　i=1;
　　　}
　　}
　}
</script>

好了，大功告成！

四、手机wap端的背后

相信搞前端的对这个都比较痛恨吧！无比坑爹的手机端，各种奇葩的android版本层出不穷！最最最坑爹的就属：微信内置浏览器了，谁玩谁知道，简直就是手机上的ie6！！！

对于本文的这个案例，用到了flexible布局来做到自适应不同的移动设备；在图标方面，用iconfont技术替代传统的图片，其它的细节，有兴趣的看官自己翻阅源码体会吧。

如果您有更好的想法或建议，还请不吝赐教于下面的评论区中。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2016-06-15/416.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。