demo地址
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Css3实现页面平滑过渡</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a class="nav-a" href="#st-panel-1">Serendipity</a>
<input type="radio" name="radio-set" id="st-control-2">
<a class="nav-a" href="#st-panel-2">Happiness</a>
<input type="radio" name="radio-set" id="st-control-3">
<a class="nav-a" href="#st-panel-3">Tranquillity</a>
<input type="radio" name="radio-set" id="st-control-4">
<a class="nav-a" href="#st-panel-4">Positivity</a>
<input type="radio" name="radio-set" id="st-control-5">
<a class="nav-a" href="#st-panel-5">Friendship</a>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-desc" data-icon="H"></div>
<h2>Serendipity</h2>
<p>走过春的田野,趟过夏的激流,来到秋天就是安静祥和的世界。秋天,虽没有玫瑰的芳香,却有秋菊的淡雅,没有繁花似锦,却有硕果累累。秋天,没有夏日的激情,却有浪漫的温情,没有春的奔放,却有收获的喜悦。清风落叶舞秋韵,枝头硕果醉秋容。秋天是甘美的酒,秋天是壮丽的诗,秋天是动人的歌。</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-desc" data-icon="2"></div>
<h2>Happiness</h2>
<p>时光如流,岁月带走了许多,却始终带不走那牵心的伤痕,寂静中,依然听得那一声声伤感的叹息;岁月如水,时光抹去了许多,却始终抹不去那伤心的印迹,孤独中,依然感受了那一阵阵酸辛的撞击。人生,总有一些人,一些事,一些情,始终也走不出记忆,深居心灵,让你独自品尝时,享受着那份孤独的美丽。</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-desc" data-icon="B"></div>
<h2>Tranquillity</h2>
<p>静静地站立枝头,静静地绽放。不期待那赞许的目光,不奢望那雷鸣般的掌声,不吝惜那优雅的花香;没有蜂缠蝶绕,没有绿叶簇拥,也不惧雨雪冰霜。在废园一角或是深山峡谷,静静地开花,悄悄地凋落。它曾来过这个世界,它属于这个世界,曾经拥有过这个世界,将曾有的倩影,曾有的花香留下,然后,悄悄离去。像一缕清风,像一颗流星…</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-desc" data-icon="x"></div>
<h2>Positivity</h2>
<p>别想来日方长,世上最愚不可及的事,莫过于胸有大志,却又虚掷时光。一生其实不长,有时还没等你活透彻,青春难觅,垂暮已至,唯留一声嗟叹。岁月难饶,光阴不逮,我们现在过的每一天,都是我们余生中最年轻的一天,把握不好当下,未来必是一片虚无。我们需要梦想,但要迈开腿,历经跋涉方能抵达。</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-desc" data-icon="c"></div>
<h2>Friendship</h2>
<p>用友谊写一本书,一本厚厚的书。在书里,友谊如珍珠,我们共同穿缀,联成一串串璀璨的项链;友谊如彩绸,我们共同剪裁,缝制成一件件绚丽的衣衫;友谊如油彩,我们共同调色,描绘出一幅幅美妙的图画。</p>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
@font-face{
font-family: "raphaelicons";
src:url('../fonts/raphaelicons-webfont.eot') format('eot'),
url('../fonts/raphaelicons-webfont.ttf') format('ttf'),
url('../fonts/raphaelicons-webfont.woff') format('woff'),
url('../fonts/raphaelicons-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: Georgia,serif;
background-color: #ddd;
font-weight: 400;
font-size: 15px;
color: #333;
-webkit-font-smoothing:antialiased;
}
a{
color: #555;
text-decoration: none;
}
.clr{
width: 0;
height: 0;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}
.st-container{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
font-family: "Josefin Slab","myriad Pro",Arial,sans-serif;
}
.st-container > input,
.st-container > .nav-a{
width: 20%;
height: 50px;
line-height: 50px;
position: fixed;
bottom: 0;
z-index: 1;
}
.st-container > input{
opacity: 0;
z-index: 2;
cursor:pointer;
}
.st-container > .nav-a{
font-weight: 700;
font-size: 20px;
background-color: #e23a6e;
text-align: center;
color: #fff;
}
#st-control-1,#st-control-1 + .nav-a{
left: 0;
}
#st-control-2,#st-control-2 + .nav-a{
left: 20%;
}
#st-control-3,#st-control-3 + .nav-a{
left: 40%;
}
#st-control-4,#st-control-4 + .nav-a{
left: 60%;
}
#st-control-5,#st-control-5 + .nav-a{
left: 80%;
}
input:checked + .nav-a,
input:checked:hover + .nav-a{
background-color: #821134;
}
input:checked + .nav-a:after {
content: "";
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color: #821134;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
}
input:hover + .nav-a {
background-color: #ad244f;
}
.st-scroll,
.st-panel{
width: 100%;
height: 100%;
position: relative;
}
.st-panel{
overflow: hidden;
z-index: 0;
}
.st-scroll{
left: 0;
top: 0;
transition:transform 0.6s ease-in-out;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-webkit-backface-visibility:hide;
}
#st-control-1:checked ~ .st-scroll {
transform:translateY(0%);
-moz-transform:translateY(0%);
-ms-transform:translateY(0%);
-o-transform:translateY(0%);
-webkit-transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
transform:translateY(-100%);
-moz-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-o-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
transform:translateY(-200%);
-moz-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-o-transform:translateY(-200%);
-webkit-transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
transform:translateY(-300%);
-moz-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-o-transform:translateY(-300%);
-webkit-transform:translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
transform:translateY(-400%);
-moz-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-o-transform:translateY(-400%);
-webkit-transform:translateY(-400%);
}
.st-desc {
width: 350px;
height: 350px;
background-color: #fa96b5;
position: absolute;
left: 50%;
margin-left: -175px;
z-index: 0;
transform:translateY(-50%) rotate(45deg);
}
[data-icon]:after{
content: attr(data-icon);
width: 350px;
height: 350px;
color: #fff;
font-size: 180px;
text-align: center;
line-height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(-45deg);
margin: -100px 0 0 -100px;
font-family: "raphaelicons";
}
.st-panel h2{
color: #e23a6e;
font-size: 70px;
line-height: 50px;
text-align: center;
font-weight: 900;
margin-top: 294px;
text-shadow: 1px 1px 8px rgba(151,24,64,0.5);
}
@-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;
}
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation:moveDown 1s ease-in-out 0.2s backwards;
-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 1s ease-in-out 0.2s backwards;
}
.st-panel p{
width: 50%;
font-size: 20px;
text-align: center;
margin: 0 auto;
margin-top: 50px;
color: #333;
word-spacing: 8px;
line-height: 30px;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation:moveUp 1s ease-in-out 0.2s backwards;
-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
animation:moveUp 1s ease-in-out 0.2s backwards;
}
.st-color{
background-color: #fa96b5;
}
.st-color [data-icon]:after{
color: #fa96b5;
}
.st-color .st-desc{
background-color: #fff;
}
.st-color h2{
color: #fff;
}
@media screen and (max-width: 520px){
.st-panel h2{
font-size: 42px;
}
.st-panel p{
width: 90%;
left: 10%;
margin-top: 0;
margin-top: 30px;
}
.st-container > a {
font-size: 13px;
}
.st-desc{
width: 200px;
height:200px;
margin-left: -100px;
}
[data-icon]:after{
width: 120px;
height: 120px;
font-size: 120px;
}
.st-panel h2{
margin-top:154px;
}
}
@media (min-width: 520px) and (max-width: 820px){
.st-panel h2{
font-size: 60px;
}
.st-panel p{
width: 90%;
left: 10%;
margin-top: 0;
margin-top: 30px;
}
.st-container > a {
font-size: 14px;
}
.st-desc{
width: 300px;
height:300px;
margin-left: -150px;
}
[data-icon]:after{
width: 120px;
height: 120px;
font-size: 120px;
}
.st-panel h2{
margin-top:220px;
}
}