如何创建css3滚动页面（上下 左右 过渡滚动）
结构代码如下：
<body>
    <div id="div_main">
        <div class="nav" id="nav_1">
        1
        </div>
        <div class="nav" id="nav_2">
        2
        </div>
        <div id="scroll">
            <div id="box1">
            box1
            </div>
            <div id="box2">
            box2
            </div>
            <div id="box3">
            box3
            </div>
        </div>
    </div>
1、 包括了一个 简单的导航，一个滚动页面的主体
2、 按照此结构，保证nav的结构级别和scroll的结构级别相同(为了使用css的波浪号“~”
样式如下：
body{
       
    }
    div#div_main{/*定义整个页面的容器要充满整个的浏览器*/
        width: 100%;
        height: 100%;
    }
    div.nav{
        position: fixed; /*也是生成绝对定位，相对于浏览器定位*/
        background: white;
        z-index: 1000; /*显示在最前面*/
        top:0px;
    }
    div#nav_1{
        height:20px;
        width:100px;
        left: 0px;
        border: 1px solid grey;
    }
    div#nav_2{
        height:20px;
        width:100px;
        left: 100px;
        border: 1px solid grey;
    }
    div#box1,#box2,#box3,#scroll{/*定义滚动页面以及其容器大小*/
        height: 100%;
        width: 100%;
    }
    div#scroll{
        position: absolute; /*使用绝对定位，定位于父元素*/
        top:0px;
        left:0px;
    }
    div#box1{
        position: absolute;/*使用绝对定位*/
css怎么创建        top:0px;
        left:0%;/*定位元素的位置*/
    }
    div#box2{
        position: absolute;
        top:0px;
        left:100%;
    }
    div#box3{
        position: absolute;
        top:0px;
        left:200%;
    }
    div#scroll{
        -moz-transition: all 0.6s ease-in-out; /*动画效果 */
        transition: all 0.6s ease-in-out;
    }
    div#box1 {
        background: red;
    }
    div#box2{
        background: yellow;
    }
    div#box3{
        background: blue;
    }
   
    div#nav_1:hover~#scroll{/*这里使用了“波浪号”用来控制相同级别元素*/
        -moz-transform: translateX(-100%);/*产生位移*/
        transform: translateX(-100%);
        background: red;
    }
    div#nav_2:hover~#scroll{
        -moz-transform: translateX(-200%);
        transform: translateX(-200%);
        background: red;
    }
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。