欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > HTML5应用 >
收 藏
2600

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

所属栏目:HTML5应用 来源:未知 内容发布:做网站吧

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


225×59

文章关键词:

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:jQuery和CSS3固定顶部菜单特效
下一篇:HTML5 SVG汉堡包菜单按钮分段动画特效

返回顶部