网页动画菜单效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

先看效果吧

还是挺有意思的，接下来我们来说一下这个东西怎么来实现的。

实现思路

总的来说就俩点，第一次就是提前把布局都写好，也就是这些东西其实在你看不到时候就已经都提前存在了，当你点击的时候只是换了一副图像，这样通俗来理解还是非常好的。

那么在我们div布局的时候我们就按照最后的效果图去布局就可以，当我们点击的是我们就把这些小菜单利用css3的动画效果把他们按照指定的路径移动过去就可以了，只是移动的时候加了动画效果。但其实这些都不用我们来担心，我们只是工具的使用者只需要告诉他目的就可以了，具体的算法都已经封装好了。

• 关键代码 transition-delay 属性用于指定元素执行过渡动画之前的延迟时间。

.menu-checkbox:checked + .menu > .menu-items > .menu-item {
  opacity: 1;
  transform: none;
  filter: none;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(1) {
  transition-delay: 0.05s;
}
 
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(2) {
  transition-delay: 0.1s;
}
 
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(3) {
  transition-delay: 0.15s;
}
 
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(4) {
  transition-delay: 0.2s;
}
 
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(5) {
  transition-delay: 0.25s;
}
 
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(6) {
  transition-delay: 0.3s;
}
.menu-checkbox:checked + .menu > .menu-closer-overlay {
  pointer-events: auto;
  cursor: pointer;
}