SASS实现圆形动画菜单

﹏ヽ暗。殇╰゛Y 2022-08-26 01:18 192阅读 0赞

好的，SASS实现的圆形动画菜单，效果和主要原理如下图所示。

![SouthEast][]

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

Are you ready? Go->

html文件

css中我们使用了sass的scss语法，并且使用了compass库

/* 变量声明
    $n,子菜单数量
    $r,圆形菜单的半径
     */
    $n:10;
    $r:100px;
    
    .menu{
      /* 圆形菜单的居住对齐 */
      position: absolute;
      width:$r*2;
      height:$r*2;
      top:50%;
      left:50%;
      margin-left:-$r;
      margin-top:-$r;
      
      /* 复选框，用来实现单击效果，不需要显示在屏幕上 */
      input#btn{
        display: none;
      }
      
      /* 菜单中间按钮，居中对齐 */
      .btn{
        display: block;
        width:50px;
        height:50px;
        background-color: #fff;
        border-radius:50%;
        box-shadow:0 0 5px rgba(0,0,0,.5);
        cursor: pointer;
        position: absolute;
        left:50%;
        top:50%;
        margin:-25px 0 0 -25px;
        z-index:100;
        
        /* 菜单中间按钮中间图形绘制 */
        &:after{
          content:"";
          position: absolute;
          left:12px;
          top:13px;
          width:28px;
          height:5px;
          background-color: #aaa;
          box-shadow:0 8px #aaa,0 16px #aaa;
        }
      }
    
      /* 子菜单项父对象 */
      .list{
        position: absolute;
        top:50%;
        left:50%;
        margin:-15px 0 0 -15px;
        z-index:1;
        list-style: none;
        
        /* 子菜单项 */
        .item{
          width:30px;
          height:30px;
          border-radius:50%;
          position: absolute;
          left:0;
          top:0;
          transition:all .5s;
        }
        .item:hover{
          cursor: pointer;
          box-shadow:0 0 10px #000;
        }
        /* 子菜单的提示文本，初始不显示 */
        .item:after{
          content:attr(title);
          position: absolute;
          top:0;
          height:30px;
          line-height: 30px;
          display: none;
        }
        .item:hover:after{
          display: block;
        }
      }
    
      @for $i from 1 through $n{
        /* 子菜单项着色 */
        .list .item:nth-child(#{$i}){
          background-color: hsl($i/$n*360,50%,50%);
        }
        /* 子菜单项hover变色 */
        .list .item:nth-child(#{$i}):hover{
          background-color: hsl($i/$n*360,100%,60%);
        }
        /* 
          子菜单项位置，实现圆形动画的核心代码，利用compass里的sin、cos函数实现
          不同菜单项，设置不同的过渡延迟
         */
        input#btn:checked~.list .item:nth-child(#{$i}){
          left:$r*cos(($i - 1)/$n*360deg);
          top:$r*sin(($i - 1)/$n*360deg);
          transition-delay:($i - 1)*.05s;
        }
        
        /* 判断是左半边还是右半边，提示文本是左侧还是右侧 */
        @if(cos(($i - 1)/$n*360deg) > 0){
          .item:nth-child(#{$i}):after{
            left:40px;
          }
        } @else {
          .item:nth-child(#{$i}):after{
            right:40px;
          }
       }  
      }
    }

That's it.　Enjoy it.

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。迎接点评，欢迎拍砖。

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[SouthEast]: /images/20220824/f9c73fa59c9c4ed88c20a5046379555e.png
[Link 1]: http://codepen.io/whqet/pen/Lpgwd
[Link 2]: http://codepen.io/whqet/share/zip/Lpgwd/
[whqet]: http://blog.csdn.net/whqet