在线演示： DEMO

直接上代码：

pagaToggle * body @font-face { font-family src: url('fonts/raphaelicons-webfont.eot') , url('fonts/raphaelicons-webfont.svg') , url('fonts/raphaelicons-webfont.ttf') , url('fonts/raphaelicons-webfont.woff') ; font-weight font-style @media screen and ( max-width: 500px ) { .box .pages > section > div { width .box .pages > section > h2 } @media screen and ( max-width: 1100px ) { .box .pages > section > figure > figcaption > a > span { font-size } .box .box > input, .box > a, .box > a:after .box > input .box > a .box > a:after .box > input:nth-of-type(1),a:nth-of-type(1) .box > input:nth-of-type(2),a:nth-of-type(2) .box > input:nth-of-type(3),a:nth-of-type(3) .box > input:nth-of-type(4),a:nth-of-type(4) .box > input:nth-of-type(5),a:nth-of-type(5) .box > input:checked + a .box > input:checked + a:after .box > input:hover + a .box > input:hover + a:after .box > input:checked:hover + a .box > input:checked:hover + a:after .box > input:nth-of-type(1):checked ~ .pages .box > input:nth-of-type(2):checked ~ .pages .box > input:nth-of-type(3):checked ~ .pages .box > input:nth-of-type(4):checked ~ .pages .box > input:nth-of-type(5):checked ~ .pages .box > input:nth-of-type(1):checked ~ .pages > section:nth-of-type(1) > figure > img .box > input:nth-of-type(2):checked ~ .pages > section:nth-of-type(2) > figure > img .box > input:nth-of-type(3):checked ~ .pages > section:nth-of-type(3) > figure > img .box > input:nth-of-type(4):checked ~ .pages > section:nth-of-type(4) > figure > img .box > input:nth-of-type(5):checked ~ .pages > section:nth-of-type(5) > figure > img .box > input:nth-of-type(1):checked ~ .pages > section:nth-of-type(1) > figure > figcaption > a > span .box > input:nth-of-type(2):checked ~ .pages > section:nth-of-type(2) > figure > figcaption > a > span .box > input:nth-of-type(3):checked ~ .pages > section:nth-of-type(3) > figure > figcaption > a > span .box > input:nth-of-type(4):checked ~ .pages > section:nth-of-type(4) > figure > figcaption > a > span .box > input:nth-of-type(5):checked ~ .pages > section:nth-of-type(5) > figure > figcaption > a > span @keyframes imgfloat { from { opacity to } @keyframes textfloat { from { opacity to } .pages .pages > section .pages > section:nth-of-type(odd) .pages > section > div .pages > section:nth-of-type(odd) div .pages > section > h2 .pages > section:nth-of-type(odd) > h2 .pages > section > figure > img .pages > section > figure > figcaption > a > span .pages > section:nth-of-type(odd) > figure > figcaption > a > span Page1Page2Page3Page4Page5gTHIS IS GLUNEFISH BLOG.dTHIS IS GLUNEFISH BLOG.eTHIS IS GLUNEFISH BLOG.fTHIS IS GLUNEFISH BLOG.hTHIS IS GLUNEFISH BLOG.