<!DOCTYPE html>
<html>
<title>css3平滑过渡页面</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<link href="css/fonts.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<style>
@charset "utf-8"
html{height:100%; }
body{ margin:0;padding:0;height: 100%; background:#ddd; font-weight:400; font-size:15px; color:#333; overflow:hidden; -webkit-font-smoothing: antialiased; }
a{ text-decoration:none; color:#555;}
.ctr{ width:0; height: 0;overflow:hidden; clear: both; margin:0;padding:0;}
.header{ }
.nav{ width:100%; height: 100px; position:absolute; left:0; top:0; }
.nav input,.nav a{width:20%; height: 35px; line-height:35px; position:fixed; bottom:0; cursor: pointer;}
.nav input{ opacity:0; z-index:1000;}
.nav a{z-index:10; font-weight:700px; font-size:16px; background: red; color:#fff; text-align:center; text-shadow:1px 1px 1px rgba(151,24,64,0.2);}
#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%;}
.nav input:checked + a,.nav input:checked:hover + a{ background:#821134;}
.nav input:checked + a:after{content:""; width:0; height:0;position: absolute;bottom: 100%; left:50%; margin-left: -20px; overflow:hidden; border:20px solid transparent; border-bottom-color: #821134;}
.nav input:hover +a{ background: #AD244f}
/*banner*/
.banner,.st_panel{width:100%; height:100%; position: relative;}
.banner{
left:0; top: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;
}
.st_panel{ background: #fff; overflow:hidden; border:1px #000 solid;}
#nav_1:checked ~.banner{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
}
#nav_2:checked ~.banner{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
}
</style>
<head>
<body>
<div class="header">
<div class="nav">
<!--导航开始-->
<input type="radio" name="radio_set" checked="cheched" id="nav_1">
<a href="#st_panel_1">首页</a>
<input type="radio" name="radio_set" id="nav_2">
<a href="#st_panel_2">工作经验</a>
<input type="radio" name="radio_set" id="nav_3">
<a href="#st_panel_3">项目</a>
<input type="radio" name="radio_set" id="nav_4">
<a href="#st_panel_4">擅长技术</a>
<input type="radio" name="radio_set" id="nav_5">
<a href="#st_panel_5">联系方式</a>
<!--导航结束-->
<!--banner开始-->
<div class="banner">
<section class="st_panel" id="st_panel_1">
<div class="st_desc" data-iocn="H"></div>
<h2>首页</h2>
<p>11111</p>
</section>
<section class="st_pane1 st_color" id="st_panel_2">
<div class="st_desc" data-iocn="2"></div>
<h2>工作经验</h2>
<p>22222</p>
</section>
<section class="st_pane1" id="st_panel_3">
<div class="st_desc" data-iocn="3"></div>
<h2>项目</h2>
<p>33333</p>
</section>
<section class="st_pane1 st_color" id="st_panel_4">
<div class="st_desc" data-iocn="4"></div>
<h2>擅长技术</h2>
<p>44444</p>
</section>
<section class="st_pane1" id="st_panel_5">
<div class="st_desc" data-iocn="5"></div>
<h2>联系方式</h2>
<p>555555</p>
</section>
</div>
<!--banner结束-->
</div>
</div>
</body>
</head>
</html>
Lemon156
相关分类