移动手机APP打开菜单过渡动画特效

PetitQ 导航菜单 2019-3-04 1.66K 0 0

这是一组移动手机（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'});

```
});
```

其它效果的实现请参考下载文件。

移动手机 APP 打开菜单过渡动画特效

已有 416 人购买

永久更新：
演示数据：
提取码：mmsk

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

移动手机APP打开菜单过渡动画特效

HTML 结构

CSS 样式

JavaScript

移动手机 APP 打开菜单过渡动画特效

相关文章

ContextMenu - 右键菜单插件

仿flash效果的jQuery下拉菜单导航代码

js和CSS3鼠标hover菜单文字特效

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

JavaScript

移动手机 APP 打开菜单过渡动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复