你的位置:首页 > 网页设计

[网页设计]15种移动手机APP打开菜单过渡动画特效


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

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

 使用方法

 HTML结构

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

<div class="mobile">   <div class="mobile-inner">     <div class="mobile-inner-header">      <div class="mobile-inner-header-icon mobile-inner-header-icon-out">       <span></span><span></span>      </div>     </div>     <div class="mobile-inner-nav">      <a href="#">Home</a>      <a href="#">Services</a>      <a href="#">Portfolio</a>      <a href="#">Blog</a>      <a href="#">About</a>      <a href="#">Contact</a>     </div>     <img src="_assets/photo1.jpg"/>     <p>......</p>      <p>......</p>    </div>   </div> </div></div>       

 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);}      

在线预览    源码下载