纯css3实现页面平滑过渡
demo地址
<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">Serendipitya>
<input type="radio" name="radio-set" id="st-control-2">
<a class="nav-a" href="#st-panel-2">Happinessa>
<input type="radio" name="radio-set" id="st-control-3">
<a class="nav-a" href="#st-panel-3">Tranquillitya>
<input type="radio" name="radio-set" id="st-control-4">
<a class="nav-a" href="#st-panel-4">Positivitya>
<input type="radio" name="radio-set" id="st-control-5">
<a class="nav-a" href="#st-panel-5">Friendshipa>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-desc" data-icon="H">div>
<h2>Serendipityh2>
<p>走过春的田野，趟过夏的激流，来到秋天就是安静祥和的世界。秋天，虽没有玫瑰的芳香，却有秋菊的淡雅，没有繁花似锦，却有硕果累累。秋天，没有夏日的激情，却有浪漫的温情，没有春的奔放，却有收获的喜悦。清风落叶舞秋韵，枝头硕果醉秋容。秋天是甘美的酒，秋天是壮丽的诗，秋天是动人的歌。p>
section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-desc" data-icon="2">div>
<h2>Happinessh2>
<p>时光如流，岁月带走了许多，却始终带不走那牵心的伤痕，寂静中，依然听得那一声声伤感的叹息；岁月如水，时光抹去了许多，却始终抹不去那伤心的印迹，孤独中，依然感受了那一阵阵酸辛的撞击。人生，总有一些人，一些事，一些情，始终也走不出记忆，深居心灵，让你独自品尝时，享受着那份孤独的美丽。p>
section>
<section class="st-panel" id="st-panel-3">
<div class="st-desc" data-icon="B">div>
<h2>Tranquillityh2>
<p>静静地站立枝头，静静地绽放。不期待那赞许的目光，不奢望那雷鸣般的掌声，不吝惜那优雅的花香；没有蜂缠蝶绕，没有绿叶簇拥，也不惧雨雪冰霜。在废园一角或是深山峡谷，静静地开花，悄悄地凋落。它曾来过这个世界，它属于这个世界，曾经拥有过这个世界，将曾有的倩影，曾有的花香留下，然后，悄悄离去。像一缕清风，像一颗流星…p>
section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-desc" data-icon="x">div>
<h2>Positivityh2>
<p>别想来日方长，世上最愚不可及的事，莫过于胸有大志，却又虚掷时光。一生其实不长，有时还没等你活透彻，青春难觅，垂暮已至，唯留一声嗟叹。岁月难饶，光阴不逮，我们现在过的每一天，都是我们余生中最年轻的一天，把握不好当下，未来必是一片虚无。我们需要梦想，但要迈开腿，历经跋涉方能抵达。p>
section>
<section class="st-panel" id="st-panel-5">
<div class="st-desc" data-icon="c">div>
<h2>Friendshiph2>
<p>用友谊写一本书，一本厚厚的书。在书里，友谊如珍珠，我们共同穿缀，联成一串串璀璨的项链；友谊如彩绸，我们共同剪裁，缝制成一件件绚丽的衣衫；友谊如油彩，我们共同调色，描绘出一幅幅美妙的图画。p>
section>
div>
div>
div>
div>
body>
html>
/*设置页面上方三角形内的图标，实际上是一种字体*/
@font-face{
/*设置字体类型*/
font-family: "raphaelicons";
/*引入字体文本，共有4个后缀文件需要全部引入*/
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;
}
/*设置根父级大小占满整个屏幕，定位后设置4个方向为0，可以自动撑满整个屏幕*/
.st-container{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
font-family: "Josefin Slab","myriad Pro",Arial,sans-serif;
}
/* > 子选择器，只选择子级，孙子级不会有影响,但是最好是给定元素一个类
，这样灵活性会更好，层级嵌套不会那么紧密，浏览器解析css是从右向左的，
所以类选择器会比元素选择器更好一点，input留作对比*/
.st-container > input,
.st-container > .nav-a{
/*宽度设置100/5=20%*/
width: 20%;
height: 50px;
line-height: 50px;
/*固定到页面底部*/
position: fixed;
bottom: 0;
/*页面所有层级最好不要超过2*/
z-index: 1;
}
/*input设置为透明，层级要比a高*/
.st-container > input{
opacity: 0;
z-index: 2;
/*鼠标样式变为手形*/
cursor:pointer;
}
/*设置a*/
.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时 ，它的兄弟级a标签背景色改变
当input为checked并且有hover时 a改变颜色，
*/
input:checked + .nav-a,
input:checked:hover + .nav-a{
background-color: #821134;
}
/*绘制三角形，当input为选中状态时，在a的后面添加伪元素，并绘制为三角
形，定位到导航上方*/
input:checked + .nav-a:after {
content: "";
/*绘制三角形方法，宽高为0,border颜色为透明，底部border颜色添加，
定位*/
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效果时 他的兄弟级a标签变色*/
input:hover + .nav-a {
background-color: #ad244f;
}
/*内容区*/
/*父级 与每一屏宽高100%，并且相对定位*/
.st-scroll,
.st-panel{
width: 100%;
height: 100%;
position: relative;
}
.st-panel{
overflow: hidden;
z-index: 0;
}
/*设定父级的位置0,0*/
.st-scroll{
left: 0;
top: 0;
/*设定过渡效果，transform 0.6秒完成 ，又快到慢*/
transition:transform 0.6s ease-in-out;
/*设定transform属性为3d，开启3d可以开启手机cpu加速，初始位置为0，*/
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; /*笔记点*/
}
/*当前选中的input的兄弟级，~ 兄弟选择器，不需要紧邻，这也是为什么刚
开始我们导航条不设置父级的原因，不然选择不到.st-scroll*/
/*第一屏选中时，.st-scroll的位置在Y轴上不动*/
#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-scroll的位置在Y轴向上移动（-1*100%）也就是一个页面
的高度*/
#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-scroll的位置在Y轴向上移动（-2*100%）也就是2个页面
的高度*/
#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%);
}
/*设置页面上方的三角块，给定一个正方形，然后旋转45deg，
位置使用translateY(-50%)，自身的一半*/
.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{
/*attr 调用自定义属性的内容*/
content: attr(data-icon);
width: 350px;
height: 350px;
/*background-color: #0f0;*/
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;
}
}