@charset "utf-8";
/* CSS Document */
.pages{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.pages > input,
.pages > a{
position: absolute;
top: 300px;
left: 500px;
width: 100px;
cursor: pointer;
font-size: 20px;
height: 35px;
line-height: 35px;
}
.pages > input{
opacity: 0;
z-index: 1000;
}
.pages > a{
z-index: 10;
text-align: center;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
.pages:before{
content: '';
position: absolute;
width: 100%;
height: 35px;
background: #e23a6e;
z-index: 9;
top: 300px;
}
#scroll_1, #scroll_1 + a {
left: 0;
}
#scroll_2, #scroll_2 + a {
left: 20%;
}
#scroll_3, #scroll_3 + a {
left: 40%;
}
.pages > input:checked + a,
.pages > input:checked:hover + a{
background: #821134;
}
.botton,
.atext {
position: relative;
width: 100%;
height: 100%;
}
.botton {
position: relative;
top: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.atext{
position: relative;
left: 0;
float: none;
background: #fff;
overflow: hidden;
}
#atext2{
position:relative;
left: 100%;
top: -100%;
}
#atext3{
position:relative;
left: 200%;
top: -200%;
}
#scroll_1:checked ~ .botton {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
#scroll_2:checked ~ .botton {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#scroll_3:checked ~ .botton {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-o-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
[data-icon]:after {
content: attr(data-icon);
font-family: 'RaphaelIcons';
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateX(25%);
-moz-transform: rotate(-45deg) translateX(25%);
-o-transform: rotate(-45deg) translateX(25%);
-ms-transform: rotate(-45deg) translateX(25%);
transform: rotate(-45deg) translateX(25%);
}
.atext h1 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
#scroll_1:checked ~ .botton #atext1 h1,
#scroll_2:checked ~ .botton #atext2 h1,
#scroll_3:checked ~ .botton #atext3 h1{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0% {
-webkit-transform: translateX(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-moz-keyframes moveDown{
0% {
-moz-transform: translateX(-40px);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
@-o-keyframes moveDown{
0% {
-o-transform: translateX(-40px);
opacity: 0;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}
@-ms-keyframes moveDown{
0% {
-ms-transform: translateX(-40px);
opacity: 0;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}
@keyframes moveDown{
0% {
transform: translateX(-40px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes moveUp{
0% {
-webkit-transform: translateX(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-moz-keyframes moveUp{
0% {
-moz-transform: translateX(40px);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
@-o-keyframes moveUp{
0% {
-o-transform: translateX(40px);
opacity: 0;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}
@-ms-keyframes moveUp{
0% {
-ms-transform: translateX(40px);
opacity: 0;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}
@keyframes moveUp{
0% {
transform: translateX(40px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
body{
font-family: Georgia, serif;
background: #ddd;
font-weight: 400;
font-size: 15px;
color: #333;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
a{
color: #555;
text-decoration: none;
}
/* Header Style */
.top{
font-size: 20px;
z-index: 9999;
position: relative;
top: 20ps;
left: 40%;
font-family: Cambria, Georgia, serif;
}
.top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #888;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>f-c</title>
</head>
<body>
<div class="top" id="top">
<a herf="#">
❤I wonn't move❤
</a>
</div>
<div class="pages">
<input type="radio" name="radio_set" checked="checked" id="scroll_1">
<a herf="#">page1</a>
<input type="radio" name="radio_set" id="scroll_2">
<a herf="#page2">page2</a>
<input type="radio" name="radio_set" id="scroll_3">
<a herf="#page3">page3</a>
<div class="botton">
<section class="atext" id="atext1">
<h1>I'm the Page1</h1>
</section>
<section class="atext" id="atext2">
<h1>I'm the Page2</h1>
</section>
<section class="atext" id="atext3">
<h1>I'm the Page3</h1>
</section>
</div>
</div>
</body>
</html>