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

頁面切換沒有效果

<!DOCTYPE?html>
<html>
?<head>
??<meta?charset="utf-8"?/>
??<title>一只特立獨行的doge</title>
??<style>
??*{
???margin:?0;
???padding:?0;
???text-decoration:?none;
??}
???.wraper{
????width:?100%;
????height:?100%;
????font-family:?"微軟雅黑";
????overflow:?hidden;
????/*只有將整個wraper定位為絕對定位，才能讓后面scroll-page撐滿整個頁面*/
????position:?absolute;
????top:?0;
????left:?0;
???}
???
???/*選擇框樣式*/
???
???.scroll-page-control?>?input,
???.scroll-page-control?>?a{
????/*將input和a絕對定位在頁面底部*/
????position:?fixed;
????bottom:?0;
????width:?25%;
????height:?60px;
????line-height:?60px;
????text-align:?center;
???}
???
???/*z-index的作用是讓單選框始終覆蓋在a標(biāo)簽只上*/
???.scroll-page-control?>?input{
????z-index:?1000;
????opacity:?0;
????cursor:?pointer;
???}
???
???.scroll-page-control?>?a{
????z-index:?10;
????font-size:?35px;
????color:?rgba(255,255,255,0.8);
????background-color:?rgba(140,5,11,0.9);
????text-shadow:?1px?1px?10px?rgba(0,0,0,1);
???}
???
???
???.scroll-page-control?#radio-1
???.scroll-page-control?#radio-1-1,{
????left:?0;
???}
???
???.scroll-page-control?#radio-2,
???.scroll-page-control?#radio-2-1{
????left:?25%;
???}
???.scroll-page-control?#radio-3,
???.scroll-page-control?#radio-3-1{
????left:?50%;
???}
???.scroll-page-control?#radio-4,
???.scroll-page-control?#radio-4-1{
????left:?75%;
???}
???
???.scroll-page-control?>?input:checked?+?a{
????background-color:rgba(247,161,84,0.9)?;
????color:?rgba(140,5,11,0.9);
????text-shadow:?1px?1px?5px?rgba(192,115,61,0.5);
???}
???
???.scroll-page-control?>?input:checked?+?a:after{
????content:?"";
????width:?0;
????height:?0;
????position:?absolute;
????top:?-60px;
????left:?50%;
????margin-left:?-30px;
????border:?30px?solid?transparent;
????border-bottom-color:rgba(247,161,84,0.9);
???}
???
??

???
???/*page樣式*/
???
???.scroll,
???.scroll-page{
????width:?100%;
????height:?100%;
????position:?relative;/*讓每個頁面充滿整個窗口*/
???}
???
???
???.scroll{
????position:?relative;
????top:?0;
????left:?0;
????-webkit-transform:?translate3d(?0,?0,?0);
????-moz-transform:?translate3d(?0,?0,?0);
????-o-transform:?translate3d(?0,?0,?0);
????-ms-transform:?translate3d(?0,?0,?0);
????transform:?translate3d(?0,?0,?0);
????-webkit-backface-visibility:?hidden;
????-moz-backface-visibility:?hidden;
????-o-backface-visibility:?hidden;
????-ms-backface-visibility:?hidden;
????backface-visibility:?hidden;
???}
???
???.scroll-page{
????background-color:?gray;
????overflow:?hidden;
???}
???
???#radio-1:checked?~?.scroll{
????-webkit-transform:?translateY(0%);
????-moz-transform:?translateY(0%);
????-o-transform:?translateY(0%);
????-ms-transform:?translateY(0%);
????transform:?translateY(0%);
???}
???#radio-2:checked?~?.scroll{
????-webkit-transform:?translateY(-100%);
????-moz-transform:?translateY(-100%);
????-o-transform:?translateY(-100%);
????-ms-transform:?translateY(-100%);
????transform:?translateY(-100%);
???}
???#radio-3:checked?~?.scroll{
????-webkit-transform:?translateY(-200%);
????-moz-transform:?translateY(-200%);
????-o-transform:?translateY(-200%);
????-ms-transform:?translateY(-200%);
????transform:?translateY(-200%);
???}
???#radio-4:checked?~?.scroll{
????-webkit-transform:?translateY(-300%);
????-moz-transform:?translateY(-300%);
????-o-transform:?translateY(-300%);
????-ms-transform:?translateY(-300%);
????transform:?translateY(-300%);
???}
???
????
??</style>
?</head>
?<body>
??<div?class="wraper">
???<div?class="scroll-page-control">
????<input?type="radio"?name="radio"?id="radio-1"?checked="checked"?/>
????<a?href="#scroll-page-1"?id="radio-1-1">home-page</a>
????<input?type="radio"?name="radio"?id="radio-2"?/>
????<a?href="#scroll-page-2"?id="radio-2-1">demo</a>
????<input?type="radio"?name="radio"?id="radio-3"?/>
????<a?href="#scroll-page-3"?id="radio-3-1">life</a>
????<input?type="radio"?name="radio"?id="radio-4"?/>
????<a?href="#scroll-page-4"?id="radio-4-1">contant-me</a>
???</div>
???<!--選單end-->
???<div?class="scroll">
????<section?class="scroll-page"?id="scroll-page-1">
?????<h2>一只特立獨行的doge-1</h2>
?????<p>你好，感謝你有時間來看這個demo</p>
????</section>
????<section?class="scroll-page"?id="scroll-page-2">
?????<h2>一只特立獨行的doge-2</h2>
?????<p>你好，感謝你有時間來看這個demo</p>
????</section>
????<section?class="scroll-page"?id="scroll-page-3">
?????<h2>一只特立獨行的doge-3</h2>
?????<p>你好，感謝你有時間來看這個demo</p>
????</section>
????<section?class="scroll-page"?id="scroll-page-4">
?????<h2>一只特立獨行的doge-4</h2>
?????<p>你好，感謝你有時間來看這個demo</p>
????</section>
???</div>
???<!--頁面end-->
??</div>
?</body>
</html>

貼上代碼，那位大大看看是什么問題