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

PetitQ 导航菜单 2019-3-04 1.53K 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 打开菜单过渡动画特效

已有 382 人购买

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

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

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

HTML 结构

CSS 样式

JavaScript

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

相关文章

漂亮的select下拉框代码

CSS3 带缩略图横向下拉菜单代码

bootstrap submenu 多级下拉菜单插件

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

JavaScript

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复