html css纵向滑动列表,css3页面鼠标纵向滑动效果

css3纵向滚屏翻页，支持键盘，鼠标操作，写得好累，但还是不够完善，来自蓝靖宇宁

body{color:#222;-webkit-text-size-adjust:none;}

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,鈥滵roid Sans鈥�,鈥滺elvetica Neue鈥�,鈥滵roid Sans Fallback鈥�,鈥滺eiti SC鈥�,sans-self;font-size:62.5%; line-height:1.5;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}

fieldset,img{border:0; display:inline-block;}

address,caption,cite,dfn,em,th,var{font-style:normal;font-weight:normal;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block; margin:0; padding:0;}/* HTML5 /

code,kbd,pre,samp{font-family:courier new,courier,monospace}

ol,ul{list-style:none;}

a{text-decoration:none; color:#222;}

a:hover{color:#000;text-decoration: none;zoom:1}

a:active{color:#666;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

input,select,button{ vertical-align: baseline; vertical-align:middle;font-family: tahoma, \5b8b\4f53, arial; font-size: 100%; }

input[type=checkbox],input[type=radio]{vertical-align:middle; margin:0 5px;}

input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}textarea{resize:none;}

textarea{overflow:auto; font:100% tahoma,\5b8b\4f53,arial;}

table{border-collapse:collapse; border-spacing:0;}

/===reset end===/

html,body{ width:100%; height:100%; overflow:hidden;}

.section-wrap{width:100%; height:100%; overflow:visible;

transition:transform 1s cubic-bezier(0.86,0,0.03,1);

-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);

-ms-transition:-ms-transform 1s cubic-bezier(0.86,0,0.03,1);

-moz-transition:-moz-transform 1s cubic-bezier(0.86,0,0.03,1);

-o-transition:-o-transform 1s cubic-bezier(0.86,0,0.03,1);}

.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}

.section-wrap .section .title{padding:150px 0 0 50px; color:#fff; font-size:40px;text-align:center; font-family:"Microsoft YaHei";}

.section-wrap .section .title p{ opacity:0}

.section-wrap .section .title .p-2{color:#ccc; font-size:20px;}

.section-wrap .section .title.active .p-1{

opacity:1;transform:translateY(-25px);

-webkit-transform:translateY(-25px);

-ms-transform:translateY(-25px);

-moz-transform:translateY(-25px);

-o-transform:translateY(-25px);

transition:all 2s cubic-bezier(0.86,0,0.8,1);

-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);

-ms-transition:all 2s cubic-bezier(0.86,0,0.8,1);

-moz-transition:all 2s cubic-bezier(0.86,0,0.8,1);

-o-transition:all 2s cubic-bezier(0.86,0,0.8,1);}

.section-wrap .section .title.active .p-2{ opacity:1;

transform:translateY(-25px);

-webkit-transform:translateY(-25px);

-ms-transform:translateY(-25px);

-moz-transform:translateY(-25px);

-o-transform:translateY(-25px);

transition:all 2s cubic-bezier(0.5,0,0.9,1);

-webkit-transition:all 2s cubic-bezier(0.5,0,0.9,1);

-ms-transition:all 2s cubic-bezier(0.5,0,0.9,1);

-moz-transition:all 2s cubic-bezier(0.5,0,0.9,1);

-o-transition:all 2s cubic-bezier(0.5,0,0.9,1);}

.section-wrap .section-1{ background-color:#0066a5}

.section-wrap .section-2{ background-color:#065E69}

.section-wrap .section-3{ background-color:#0D2C7C}

.section-wrap .section-4{ background-color:#0C6242}

.section-wrap .section-5{ background-color:#413004}

.put-section-0{transform:translateY(0);

-webkit-transform:translateY(0);

-ms-transform:translateY(0);

-moz-transform:translateY(0);

-o-transform:translateY(0); }

.put-section-1{transform:translateY(-100%);

-webkit-transform:translateY(-100%);

-ms-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-o-transform:translateY(-100%);}

.put-section-2{transform:translateY(-200%);

-webkit-transform:translateY(-200%);

-ms-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-o-transform:translateY(-200%);}

.put-section-3{transform:translateY(-300%);

-webkit-transform:translateY(-300%);

-ms-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-o-transform:translateY(-300%);}

.put-section-4{transform:translateY(-400%);

-webkit-transform:translateY(-400%);

-ms-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-o-transform:translateY(-400%);}

.section-btn{ position:fixed; right:40px;top:50%; width:14px;}

.section-btn li{margin-bottom:15px; background:#069052;text-align:center; color:#fff; cursor:pointer;}

.section-btn li.cur{ background:#0CEA87}

.go-btn{ opacity:1;

webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;

-webkit-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;

-ms-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;

-moz-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;

-o-animation:go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;

transform:rotate(-90deg);

-webkit-transform:rotate(-90deg);

-ms-transform:rotate(-90deg);

-moz-transform:rotate(-90deg);

-o-transform:rotate(-90deg);

position:absolute;bottom:10px;left:48%;

width:60px; height:60px; border-radius:100%; line-height:60px; text-align:center; font-size:20px; color:#fff; border:1px solid #fff; cursor:pointer; overflow:hidden}

.go-btn:hover{

animation-play-state:paused;

-webkit-animation-play-state:paused;

-ms-animation-play-state:paused;

-moz-animation-play-state:paused;

-o-animation-play-state:paused;

}

@keyframes go-btn{