手机APP切换页面动画过渡效果_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款使用CSS3制作的手机APP切换页面动画过渡效果。该页面切换动画效果只设计了两个页面，可以点击前一页和上一页按钮来回切换，并在页面切换的时候使用CSS3制作了非常炫酷的过渡动画效果。

使用方法

HTML结构

该手机APP页面切换特效的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代码动态添加到元素上面的。

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

代码不算复杂，具体实现代码请参看下载文件。