1 / 7
文档名称:

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

格式:docx   大小:64KB   页数:7页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

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

上传人:文库旗舰店 2019/6/12 文件大小:64 KB

下载得到文件列表

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

相关文档

文档介绍

文档介绍:3种CSS3移动手机隐藏菜单UI界面设计源码这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计。这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,MaterialDesign风格效果和展开式效果。使用方法HTML结构这三种不同的隐藏菜单的HTML结构大致基本相同。第一种滑动效果菜单的HTML结构如下:<divclass="screen">  <divclass="navbar"></div>  <divclass="list">      <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>            <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>            <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>            <divclass="item">        <divclass="img"></div>        <span></span>        <span></span>        <span></span>                    </div>  </div>                                   <divclass="burger">      <divclass="x"></div>      <divclass="y"></div>      <divclass="z"></div>  </div>      </div>  </div>         CSS样式第一种隐藏菜单的滑动效果的CSS实现代码非常简单。整个菜单设置了固定的宽度和高度,并设置指定贝兹曲线的动画过渡效果。{  height:568px;   width:320px;  margin-left:-190px;  opacity:0;    position:relative;  -webkit-transition:all500mscubic-bezier(,,,);    -moz-transition:all500mscubic-bezier(,,,);    -ms-transition:all500mscubic-bezier(,,,);    -o-transition:all500mscubic-bezier(,