当前位置：首页 > 网页特效 > 动画效果

手机APP切换页面动画过渡效果

分类：动画效果日期：2024-05-14 点击(2) 评论(0)

手机APP切换页面动画过渡效果

简介

#####  HTML结构
该手机APP页面切换特效的HTML结构如下：

```html
<div id='phone'>
  <div id='screen'>
    <div class='viewport first'>
      <div class='header'>
        Lorem ips..
        <span id='next'>Next Post</span>
      </div>
      <div class='content'>
        <div class='box image'>
          <i class='icon-picture'></i>
        </div>
        <div class='box text'>...</div>
        <div class='box comment'>
          <div class='avatar'>
            <i class='icon-user'></i>
          </div>
          <div class='bubble'></div>
        </div>
        <div class='box comment second'>
          <div class='avatar'>
            <i class='icon-user'></i>
          </div>
          <div class='bubble'></div>
        </div>
      </div>
    </div>
    <div class='viewport last'>
      <div class='header'>
        Sit amet..
        <span id='next'>Prev Post</span>
      </div>
      <div class='content'>
        <div class='box image'>
          <i class='icon-truck'></i>
        </div>
        <div class='box text'>...</div>
        <div class='box comment'>
          <div class='avatar'>
            <i class='icon-user'></i>
          </div>
          <div class='bubble'></div>
        </div>
      </div>
    </div>
  </div>
</div>
```
#####  CSS样式
页面切换的动画主要靠.animate class来完成，这个class是在点击了操作按钮之后由jQuery代码动态添加到元素上面的。

```html
.animate .last {
    top: 0;
}
 
.animate .first {
    -webkit-transform: rotateY(110deg);
    -moz-transform: rotateY(110deg);
}
.animate .last .box.image {
    left: 0;
}
 
.animate .last .box.text {
    left: 0;
}
 
.animate .last .box.comment {
    bottom: 0;
}       
```          
代码不算复杂，具体实现代码请参看下载文件。

web299.com

手机APP切换页面动画过渡效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果