纯css实现全屏滚动效果

 

@font-face{
    font-family: "raphaelicons";
    src: url('../fonts/raphaelicons-webfont.eot') format('eot'),
         url('../fonts/raphaelicons-webfont.svg') format('svg'),
         url('../fonts/raphaelicons-webfont.ttf') format('truetype'),
         url('../fonts/raphaelicons-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: Georgia, serif;
    background: #ddd;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    overflow: hidden;
    -webkit-font-smoothing:antialiased;
}
a{text-decoration: none;color: #555;}
.clearfix{width: 0;height: 0;overflow: hidden;clear: both;padding: 0;margin: 0;}
.st-container{
    width: 100%;height: 100%;
    position: absolute;left: 0;top: 0;
    font-size: "Josefin Slab","Myriad Pro",Arial,sans-serif;
}
.st-container input{
    z-index: 2;
    opacity: 0;
}
.st-container a{
    z-index: 1;
    font-weight: 700;
    font-size: 16px;
    background-color: #e23a6e;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    cursor: pointer;
}
.st-container input,.st-container a{
    width: 20%;
    height: 34px;
    line-height: 34px;
    position: fixed;
    bottom: 0;
}
#st-control-1,#st-control-1+a{left: 0;}
#st-control-2,#st-control-2+a{left: 20%;}
#st-control-3,#st-control-3+a{left: 40%;}
#st-control-4,#st-control-4+a{left: 60%;}
#st-control-5,#st-control-5+a{left: 80%;}
.st-container input:checked+a,.st-container input:checked:hover+a{
    background-color: #821134;
}
.st-container input:checked+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;
}
.st-container input:hover+a{background-color: #AD244F;}
.st-scroll,.st-panel{width: 100%;height: 100%;position: relative;}
.st-scroll{
    left: 0;top: 0;
    transform: translate3d(0,0,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);
    -webkit-backface-visibility: hidden;
    transition: all 0.6s ease-in-out;
    -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;
}
.st-panel{background-color: #fff;overflow: hidden;}
#st-control-1:checked~.st-scroll{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
}
#st-control-2:checked~.st-scroll{
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
}
#st-control-3:checked~.st-scroll{
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
}
#st-control-4:checked~.st-scroll{
    transform: translateY(-300%);
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
}
#st-control-5:checked~.st-scroll{
    transform: translateY(-400%);
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
}
.st-desc{
    width: 200px;
    height: 200px;
    background-color: #fa96B5;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -100px;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
}
[date-icon]:after{
    content: attr(date-icon);
    width: 200px;
    height: 200px;
    color: #fff;
    font-size: 90px;
    text-align: center;
    line-height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    transform: rotate(-45deg) translateY(25%);
    -webkit-transform: rotate(-45deg) translateY(25%);
    -moz-transform: rotate(-45deg) translateY(25%);
    -o-transform: rotate(-45deg) translateY(25%);
    -ms-transform: rotate(-45deg) translateY(25%);
    font-family: "raphaelicons";
}
.st-panel h2{
    color: #e23a6e;
    font-size: 54px;
    line-height: 50px;
    text-align: center;
    font-weight: 900;
    width: 80%;
    position: absolute;
    left: 10%;
    top: 50%;
    margin-top: -70px;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    -webkit-backface-visibility: hidden;
}
#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{
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -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;
}
@keyframes moveDown{
    0%{
        transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        transform:translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes moveDown{
    0%{
        -webkit-transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        -webkit-transform:translateY(0);
        opacity: 1;
    }
}
@-moz-keyframes moveDown{
    0%{
        -moz-transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        -moz-transform:translateY(0);
        opacity: 1;
    }
}
@-o-keyframes moveDown{
    0%{
        -o-transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        -o-transform:translateY(0);
        opacity: 1;
    }
}
@-ms-keyframes moveDown{
    0%{
        -ms-transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        -ms-transform:translateY(0);
        opacity: 1;
    }
}
.st-panel p{
    position: absolute;
    width: 50%;
    left: 25%;
    top: 50%;
    font-size: 16px;
    line-height: 22px;
    padding: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    color: #8b8b8b;
    margin-top: 10px;
}
#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{
    animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveUp{
    0%{
        transform: translateY(40px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes moveUp{
    0%{
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}
@-moz-keyframes moveUp{
    0%{
        -moz-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -moz-transform: translateY(0);
        opacity: 1;
    }
}
@-o-keyframes moveUp{
    0%{
        -o-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -o-transform: translateY(0);
        opacity: 1;
    }
}
@-ms-keyframes moveUp{
    0%{
        -ms-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -ms-transform: translateY(0);
        opacity: 1;
    }
}
.st-color{background-color: #fa96B5;}
.st-color .st-desc{background-color: #fff;}
.st-color [date-icon]:after{color: #fa96B5;}
.st-color h2{color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.st-color p{color:rgba(255,255,255,0.8);}
@media screen and (max-width:520px){
    .st-panel h2{font-size: 42px;}
    .st-panel p{width: 80%;left: 10%;margin-top: 0;}
    .st-container a{font-size: 13px;}
} 
@media screen and (max-width:520px){
    .st-panel h2{font-size: 42px;}
    .st-panel p{width: 80%;left: 10%;margin-top: 0;}
    .st-container a{font-size: 10px;}
    .st-desc{width: 120px;height: 120px;margin-left: -60px;}
    [date-icon]:after{
        font-size: 60px;
        transform: rotate(-45deg) translateY(15%);
        -webkit-transform: rotate(-45deg) translateY(15%);
        -moz-transform: rotate(-45deg) translateY(15%);
        -o-transform: rotate(-45deg) translateY(15%);
        -ms-transform: rotate(-45deg) translateY(15%);
    }
} 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>content</title>
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./css//normalize.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
        <div class="st-container">
            <!--nav begin-->
            <input type="radio" name="radio-set" checked="checked" id="st-control-1">
            <a href="#st-panel-1">Serendipity</a>
            <input type="radio" name="radio-set" id="st-control-2">
            <a href="#st-panel-2">Happiness</a>
            <input type="radio" name="radio-set" id="st-control-3">
            <a href="#st-panel-3">Tranquillity</a>
            <input type="radio" name="radio-set" id="st-control-4">
            <a href="#st-panel-4">Positivity</a>
            <input type="radio" name="radio-set" id="st-control-5">
            <a href="#st-panel-5">Passion</a>
            <!--nav end-->
            <div class="st-scroll">
                <section class="st-panel" id="st-panel-1">
                    <div class="st-desc" date-icon="H"></div>
                    <h2>Serendipity</h2>
                    <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd future nisi,commodo mlkshk pop-up adipisicing retro.</p>
                </section>
                <section class="st-panel st-color" id="st-panel-2">
                    <div class="st-desc" date-icon="2"></div>
                    <h2>Happiness</h2>
                    <p>Art party readymade beard labore cosby sweater culpa.Art party whatever incididunt,scenester umami polaroid tofu.</p>
                </section>
                <section class="st-panel" id="st-panel-3">
                    <div class="st-desc" date-icon="B"></div>
                    <h2>Tranquillity</h2>
                    <p>Sint aute occaecat id vice.Post-ironic fap pork belly next level godard,id fanny pack williamsburg forage truffaut.</p>
                </section>
                <section class="st-panel st-color" id="st-panel-4">
                    <div class="st-desc" date-icon="x"></div>
                    <h2>Positivity</h2>
                    <p>Mixtape fap leggings art party,butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
                </section>
                <section class="st-panel" id="st-panel-5">
                    <div class="st-desc" date-icon="C"></div>
                    <h2>Passion</h2>
                    <p>Fixie ad odd future polaroid dreamcatcher,nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
                </section>
            </div>
        </div>
    </div>
</body>
</html>