您的位置：首页 > 移动开发

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

2017-10-11 10:33 239 查看 
属于魅族的忠实粉，使用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){// 圆的半径 raduisvar width = navWrap.width(),radius = width / 2;// 圆形菜单的起始、终止角度var startAngle = -90,endAngle =-230;// 两个子菜单间的夹角 gapvar 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"; }

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航