转载

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

简要教程

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

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

查看演示 下载插件

使用方法

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

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

来源 jQuery之家

正文到此结束