                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

页面无法滑动切换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">
<link rel="stylesheet" href="normalize.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/holder.min.js"></script>
<script src="bootstrap/js/application.js"></script> -->
<link rel="stylesheet" href="normalize.css">
<style>
    @font-face{font-family: CygnetRound;src:url('CygnetRound.ttf');}
    @font-face{font-family: icon;src:url('fonts/raphaelicons-webfont.ttf');}
    html{width:100%;height: 100%;}
    body{font-family: Georgia,serif;background-color: #ddd;font-weight: 400px;font-size: 15px;width: 100%;height:100%;overflow: hidden;}
    .container{width: 100%;height:100%;position: relative;top: 0;left: 0;/* -webkit-font-smoothing:antialiased; */}
    a{text-decoration:none;}
    /* nav{position: fixed;bottom:0%;width: 100%;height: 50px;font-family: "CygnetRound","Myriad Pro";box-shadow: -1px -1px 1px rgba(151,24,64,0.6);} */
    .navigation{position:absolute;width: 20%;height: 50px;background-color: #ef4d6d;}   
    input,a{display:block;position: fixed;bottom:0%;height: 50px;color: #fefefe;line-height: 50px;text-align: center;font-size:22px;font-weight:bold;text-shadow:1px 1px 1px rgba(151,24,64,0.5);cursor: pointer;}
    input{opacity: 1;z-index: 1000;}
    a{z-index: 2;}
    .navigation:hover{background-color: #f26984;}
    input:checked + a{background-color: #b7243f;}
    input:checked+a:after{/* 下面是画个三角形 */content:'';width:0;height:0;overflow: hidden;border:20px solid transparent;border-bottom-color:#b7243f;/* 下面是给三角形定位 */position:absolute;bottom:100%;left:50%;margin-left:-20px; }
    .nav_1,.nav_a{position: absolute;left: 0;}
    .nav_2,.nav_b{position: absolute;left: 20%;}
    .nav_3,.nav_c{position: absolute;left: 40%;}
    .nav_4,.nav_d{position: absolute;left: 60%;}
    .nav_5,.nav_e{position: absolute;left: 80%;}

    .container .nav_1 :checked ~ .main{-moz-transform:translateY(0%);}
    .container .nav_2 :checked ~ .main{-moz-transform:translateY(-100%);}
    .container .nav_3 :checked ~ .main{-moz-transform:translateY(-200%);}
    .container .nav_4 :checked ~ .main{-moz-transform:translateY(-300%);}
    .container .nav_5 :checked ~ .main{-moz-transform:translateY(-400%);}
    .main{width: 100%;height: 100%;position: relative;top:0;left:0;-moz-transform:translate3d(0,0,0);-moz-transition: all 0.5s ease-in;}
    section{width: 100%;height: 100%;position: relative;}
    


</style>
</head>
<body>
    <div class="container">
            
        <input type="radio" checked="checked" name="navbar" class="navigation nav_1"/>
        <a href="#serious" class="navigation nav_a">Serious</a>


        <input type="radio" name="navbar" class="navigation nav_2"/>
        <a href="#understanding" class="navigation nav_b">Understanding</a>


        <input type="radio" name="navbar" class="navigation nav_3"/>
        <a href="#experience" class="navigation nav_c">Experience</a>


        <input type="radio" name="navbar" class="navigation nav_4"/>
        <a href="#determine" class="navigation nav_d">Determine</a>


        <input type="radio" name="navbar" class="navigation nav_5"/>
        <a href="#confidence" class="navigation nav_e">Confidence</a>

        <div class="main">
            <section id="serious">
                <div class="" data-icon="2"></div>
                <h2>Serious</h2>
                <p>When it comes to family, we are all still children at heart. No matter how old we get,we always need a place to call home.</p>
            </section>
            <section id="understanding">
                <div class="" data-icon="2"></div>
                <h2>Understanding</h2>
                <p>When it comes to family, we are all still children at heart. No matter how old we get,we always need a place to call home.</p>
            </section>
            <section id="experience">
                <div class="" data-icon="2"></div>
                <h2>Experience</h2>
                <p>When it comes to family, we are all still children at heart. No matter how old we get,we always need a place to call home.</p>
            </section>
            <section id="determine">
                <div class="" data-icon="2"></div>
                <h2>Determine</h2>
                <p>When it comes to family, we are all still children at heart. No matter how old we get,we always need a place to call home.</p>
            </section>
            <section id="confidence">
                <div class="" data-icon="2"></div>
                <h2>Confidence</h2>
                <p>When it comes to family, we are all still children at heart. No matter how old we get,we always need a place to call home.</p>
            </section>
        </div>
    </div>
</body>
</html>