                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /css3實現(xiàn)網(wǎng)頁平滑過渡效果

頁面無法滑動切換

<!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>