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

当前位置:主页 > CSS3库 > CSS3动画 > 手机APP切换页面动画过渡效果
手机APP切换页面动画过渡效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-10-25
    阅读:
简要教程

这是一款使用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;
}                 
                

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