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

最新推荐文章于 2021-05-28 08:00:20 发布

酒铺里的奶橘猫

最新推荐文章于 2021-05-28 08:00:20 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_33559304/article/details/78200860

版权

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

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style/index.css">
    <link rel="stylesheet" href="font/font.css">
</head>
<body>


<div class="nav-wrap">
    <nav>
        <a class="nav-item"><i class="iconfont icon-biji"></i></a>
        <a class="nav-item"><i class="iconfont icon-xiangji"></i></a>
        <a class="nav-item"><i class="iconfont icon-hauti"></i></a>
    </nav>
    <div class="main-nav"><i class="iconfont icon-jiahao"></i></div>
</div>

</body>
<script src="http://s0.qhimg.com/lib/jquery/183.js" ></script>
<script type="text/javascript">
    (function(){

        // 当菜单没被激活时
        var isLocated = false;

        $('.nav-wrap').on('click','.main-nav',function(e){
            e.preventDefault();

            var me = $(this),
                navWrap = me.closest('.nav-wrap'), // 动画效果的父容器
                navs = navWrap.find('nav a'); // 父容器中的所有子菜单

            if(!navWrap.hasClass('active') && !isLocated){

                // 圆的半径 raduis
                var width = navWrap.width(),
                    radius = width / 2;

                // 圆形菜单的起始、终止角度
                var startAngle = -90,
                    endAngle =-230;

                // 两个子菜单间的夹角 gap
                var total = navs.length,
                    gap = (endAngle - startAngle)/total;

                // 角度->弧度
                var radian = Math.PI / 180;


                /*
                 * 计算并确定各个子菜单的最终位置
                 */
                $.each(navs, function(index, item){

                    // 当前子菜单与x轴正向的夹角 θ （角度->弧度）
                    var myAngle = (startAngle + gap*index) * radian;  // θ

                    // 计算当前子菜单相对于左上角(0,0)的坐标 (x,y)
                    var myX = radius + radius * Math.cos( myAngle ), // x=r+rcos(θ)
                        myY = radius + radius * Math.sin( myAngle ); // y=r+rsin(θ)

                    // 设置当前子菜单的位置 (left,top) = (x,y)
                    $(this).css({
                        left: myX + 'px',
                        top:  myY + 'px'
                    });
                });

                isLocated = true;
            }

            navWrap.toggleClass('active');
            $('.nav-item').toggleClass('a_active');
            $('.main-nav').toggleClass('main-active')

        });

    })();



</script>
</html>

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"; }