仿魅族flyme社区app的一个动画效果

属于魅族的忠实粉，使用flyme社区的时候发现一个不错的效果，所以就私下来研究哈。

效果如下：

    
    
    
    





    

        
        
        
    
    








index css部分:

* {
    margin: 0;
    padding: 0;
}
body {
    /*background-color: #292a38;*/
    font-family: "Microsoft Yahei";
}
h1 {
    margin-top: 20px;
    text-align: center;
    color: #fff;
}

.nav-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
    /*border: 2px dotted #4e5061;*/
    border-radius: 50%;
}
.main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(0deg) scale(1);
            transform: translate(-50%,-50%) rotate(0deg) scale(1);
    transition: all .2s linear;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 50px;
    text-shadow: 1px 1px 0px #000;
    background: #0184FF;
    cursor: pointer;
    opacity: 1;
}
.main-active{
    background: #15a5f3;
    opacity: .5;
    -webkit-transform: translate(-50%,-50%) rotate(45deg) scale(0.8);
    transform: translate(-50%,-50%) rotate(45deg) scale(0.8);
}

.nav-wrap nav {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0) ;
            transform: scale(0) ;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 0;
}
.nav-wrap.active nav {
    -webkit-transform: scale(1) ;
            transform: scale(1) ;
    opacity: 1;
}
.nav-item{
    position: absolute;
    width: 40px;
    height: 40px;
    background: #0184FF;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
    border-radius: 50px;
    text-shadow: 1px 1px 0px #000;
    -webkit-transform: translate(-50%,-50%) rotate(0deg) ;
            transform: translate(-50%,-50%) rotate(0deg) ;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.a_active{
    -webkit-transform: translate(-50%,-50%) rotate(720deg) !important;
            transform: translate(-50%,-50%) rotate(720deg) !important;  ;
}

.iconfont css:
@font-face {
    font-family: 'iconfont';  /* project id 422939 */
    src: url('//at.alicdn.com/t/font_422939_xqeu49ziopw4s4i.eot');
    src: url('//at.alicdn.com/t/font_422939_xqeu49ziopw4s4i.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_422939_xqeu49ziopw4s4i.woff') format('woff'),
    url('//at.alicdn.com/t/font_422939_xqeu49ziopw4s4i.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_422939_xqeu49ziopw4s4i.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:18px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.icon-jiahao:before { content: "\e603"; }
.icon-hauti:before { content: "\e895"; }
.icon-xiangji:before { content: "\e674"; }
.icon-biji:before { content: "\e606"; }