导航菜单
移动手机APP打开菜单过渡动画特效
PetitQ
这是一组移动手机（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);
}
变为各个导航项设置 animation 动画：动画的持续时间 animation-duration 为 0.5 秒，填充模式 animation-fill-mode 为 both，动画名称为 returnToNormal。
.mobile-inner-nav a{
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: returnToNormal;
animation-name: returnToNormal;
}
returnToNormal 帧动画第 0 帧时元素的透明度设置为 0，通过 translate3d()函数将元素在 Y 轴方向上压缩为负值。然后在第 100 帧的时候，元素的透明度恢复为 1，transform 属性设置为 none，也就是恢复 translate3d()为默认值(0,0,0)，这样，整个动画的效果就是菜单项由上往下依次展开。
@-webkit-keyframes returnToNormal {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}}@keyframes returnToNormal {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}}
JavaScript
第一种动画过渡效果的实现需要一些 JavaScript 代码的辅助。下面的第一段代码用于在点击汉堡包按钮之后，使菜单面板滑动显示。第二段代码用于为各个菜单项设置动画的延迟时间。
$(".mobile-inner-header-icon").click(function(){
$(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
$(".mobile-inner-nav").slideToggle(250);
});
$(".mobile-inner-nav a").each(function( index ) {
$( this ).css({'animation-delay': (index/10)+'s'});
});
其它效果的实现请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
