3种CSS3移动手机隐藏菜单UI界面设计源码.docx

3种CSS3移动手机隐藏菜单UI界面设计源码
D
去名企 拿高薪 到翡翠教育
2
去名企 拿高薪 到翡翠教育
3
去名企 拿高薪 到翡翠教育
4
      <div class="z"></div>
  </div>      
</div>  
</div>        
　　CSS样式
　　第一种隐藏菜单的滑动效果的CSS实现代码非常简单。整个菜单设置了固定的宽度和高度，并设置指定贝兹曲线的动画过渡效果。
{
  height: 568px; 
  width: 320px;
  margin-left:-190px;
  opacity:0;  
  position:relative;
  -webkit-transition: all 500ms cubic-bezier(, , , );
    -moz-transition: all 500ms cubic-bezier(, , , );
    -ms-transition: all 500ms cubic-bezier(, , , );
去名企 拿高薪 到翡翠教育
5
     -o-transition: all 500ms cubic-bezier(, , , );
       transition: all 500ms cubic-bezier(, , , ); 
}
　　在菜单按钮被点击的时候，背景图片会轻微的移动一些，制作出一点视觉差效果。
#menu-bg{
  position: absolute;
  left: -10px;
  top: -120px;  
  opacity: ;
  -webkit-transition: all 500ms cubic-bezier(, , , );
    -moz-transition: all 500ms cubic-bezier(, , , );
    -ms-transition: all 500ms cubic-bezier(, , , );
     -o-transition: all 500ms cubic-bezier(, , , );
       transition: all 500ms cubic-bezier(, , , ); 
去名企 拿高薪 到翡翠教育
6
}
#menu-bg{
   left:-23px;
  -webkit-transition: all 500ms cubic-bezier(, , , );
    -moz-transition: all 500ms cubic-bezier(, , , );
    -ms-transition: all 500ms cubic-bezier(, , , );
     -o-transition: all 500ms cubic-bezier(, , , );
       transition: all 500ms cubic-bezier(, , , ); 
}  
　　菜单项使用margin-left值来制作动画效果，每一个菜单项都设置了不同的延迟时间，使它们有依次进入的效果。
ul{margin-top:110px;position:relative;}
ul li {
  list-style: none;
  width: 320px;
  margin-top: 40px;
去名企 拿高薪 到翡翠教育
7
  text-align: left;
  padding-left: 1