CSS3实现整屏切换效果_html/css_WEB-ITnose

总是能看见很多广告或者网站都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。最近刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。

页面结构

实现思路与大众方法类似，如图

每个section就是一页内容，它的大小充满了屏幕（红色区域），一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面好像上移了，container向上走，页面就下移了。
html结构如下：

                              body, html{ padding: 0; margin: 0; } body, html { height: 100%; /**隐藏滚动条**/ overflow: hidden; } #container, .section { height: 100%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; }    
    


      
查看更多关于CSS3实现整屏切换效果_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108476