SASS实现圆形动画菜单

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

在线研究点这里，下载收藏点这里。

Are you ready? Go->

html文件

<div class="menu">
  <input type="checkbox" id="btn" />
  <label class="btn" for="btn"></label>
  <ul class="list">
    <li class="item" title="Codepen"></li>
    <li class="item" title="Codrops"></li>
    <li class="item" title="Github"></li>
    <li class="item" title="WDL"></li>
    <li class="item" title="noupe"></li>
    <li class="item" title="Magzine"></li>
    <li class="item" title="Awwwards"></li>
    <li class="item" title="Tricks"></li>
    <li class="item" title="WebPlatForm"></li>
    <li class="item" title="etc."></li>
  </ul>
</div>

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.

在线研究点这里，下载收藏点这里。迎接点评，欢迎拍砖。

---------------------------------------------------------------

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