<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link style="text/css" rel="stylesheet" href="style2.css">
</head>
<body>
<div class="all">
<div class="navbox">
<input type="radio" checked="checked" class="nav-1" name="nav">
<a href="#part-1">11111</a>
<input type="radio" class="nav-2" name="nav">
<a href="#part-2">22222</a>
<input type="radio"class="nav-3" name="nav">
<a href="#part-3">33333</a>
<input type="radio" class="nav-4" name="nav">
<a href="#part-4">44444</a>
<input type="radio" class="nav-5" name="nav">
<a href="#part-5">555555</a>
</div>
<div class="content">
<div class="section" id="part-1">
<div class="icon"><span>1</span></div>
<h2>第一部分</h2>
<p>111111111111111111111111111111</p>
</div>
<div class="section color" id="part-2">
<div class="icon"><span>2</span></div>
<h2>第二部分</h2>
<p>111111111111111111111111111111</p>
</div>
<div class="section" id="part-3">
<div class="icon"><span>3</span></div>
<h2>第三部分</h2>
<p>111111111111111111111111111111</p>
</div>
<div class="section .color" id="part-4">
<div class="icon"><span>4</span></div>
<h2>第四部分</h2>
<p>111111111111111111111111111111</p>
</div>
<div class="section" id="part-5">
<div class="icon"><span>5</span></div>
<h2>第五部分</h2>
<p>111111111111111111111111111111</p>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}
html,body{ width:100%; height:100%;}
a{ text-decoration:none;}
/*nav*/
.all{ height:100%; width:100%;}
.navbox{ position:relative;}
input,input+a{ width:20%; background:#F9C; color:#fff; height:40px; position:fixed; bottom:0; cursor:pointer;}
input{ z-index:1000; opacity:0;}
a{ z-index:100; text-align:center; line-height:40px; font-size:20px; display:block;}
.nav-1,.nav-1+a{ left:0%;}
.nav-2,.nav-2+a{left:20%;}
.nav-3,.nav-3+a{left:40%;}
.nav-4,.nav-4+a{left:60%;}
.nav-5,.nav-5+a{left:80%;}
input:checked+a,input:checked:hover+a{ background:#F66;}/*选择器*/
input:hover+a{ background:#F96;}
input:checked+a:after{ content:""; border:60px solid transparent; border-bottom-color:#F66; position:absolute; bottom:100%; left:50%; width:0px; height:0px; margin-left:-60px;}
/*三角形的制作，宽高都为0*/
/*content*/
.content{ height:100%; width:100%;overflow:hidden; top:0; left:0; position:relative;}
.section{height:100%; width:100%;-webkit-transform:translate3d(0,0,0);-webkit-transiton:all 0.6s ease-in-out; position:relative;overflow:hidden; }
.nav-1:checked~.content{ -webkit-transform:translateY(0%);}
.nav-2:checked~.content{ -webkit-transform:translateY(-100%);}
.nav-3:checked~.content{ -webkit-transform:translateY(-200%);}
.nav-4:checked~.content{ -webkit-transform:translateY(-300%);}
.nav-5:checked~.content{ -webkit-transform:translateY(-400%);}
.icon{ width:100px; height:100px; background-color:#F99; -webkit-transform:translateY(-50%) rotate(45deg); position:absolute; top:0; left:50%; margin-left:-50px; overflow:hidden;}
.icon span{ -webkit-transform:translateY(25%) rotate(-45deg); display:block; font-size:30px; width:80%; text-align:center; position:absolute; left:10%; top:50%; margin-left:25px;}
h2{ font-size:50px; width:80%; position:absolute; top:35%; left:10%; text-align:center;}
p{font-size:40px; width:80%; position:absolute; top:45%; left:10%; text-align:center; word-wrap:break-word;}
.nav-1:checked~.content #part-1 h2,.nav-2:checked~.content #part-2 h2{-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;}
.nav-1:checked~.content #part-1 p,.nav-2:checked~.content #part-2 p{-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;}
.color{ background:#F96;}
.color .icon{ background:white; color:#F69;}
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity:1;
}
}
@-webkit-keyframes moveUp{
0%{-webkit-transform:translateY(40px);
opacity:0;}
100%{-webkit-transform:translateY(0px);
opacity:1;}
}