15种移动手机APP打开菜单过渡动画特效 - 爱上程序猿_H5之家

这是一组移动手机（Mobile）APP打开菜单时的过渡动画特效。这组过渡动画共有15种效果，分别使用CSS3 animation动画来制作，这些动画均由线条和文字组成，效果非常炫酷。

这15种移动手机APP打开菜单动画效果所需的CSS动画样式都写在各自的页面中，同时使用少量的JavaScript代码来为元素切换相应的class类。

使用方法 HTML结构

所有的例子都使用相同的HTML结构：其中，.mobile-inner-header-icon是汉堡包图标，.mobile-inner-header-icon-out class类用于制作图标的动画效果。两个空的<span>元素用于制作汉堡包图标的线条。

HomeServicesPortfolioBlogAboutContact............

CSS样式

以第一种动画的CSS样式为例子，在第一种APP导航菜单特效中，首先为导航项添加一些通用的样式：

.mobile-inner-nav a{ display: inline-block; line-height: 50px; text-decoration: none; width: 80%; margin-left: 10%; color: #FFFFFF; border-bottom: solid 1px rgba(255,255,255,0.3); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-weight:300; } .mobile-inner-nav a:hover{ color: rgba(255,255,255,0.4); border-bottom: solid 1px rgba(255,255,255,0.2); }

在线预览源码下载