HTML如下：
--> 4 <section id="set-1"> 5 <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a"> 6 <a href="#set-1" class="hi-icon hi-icon-archive">Archive</a> 7 <a href="#set-1" class="hi-icon hi-icon-chat">Chat</a> 8 <a href="#set-1" class="hi-icon hi-icon-bookmark">Bookmarks</a> 9 <a href="#set-1" class="hi-icon hi-icon-user">User</a> 10 <a href="#set-1" class="hi-icon hi-icon-contract">Contact</a> 11 </div> 12 <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"> 13 <a href="#set-1" class="hi-icon hi-icon-archive">Archive</a> 14 <a href="#set-1" class="hi-icon hi-icon-chat">Chat</a> 15 <a href="#set-1" class="hi-icon hi-icon-bookmark">Bookmarks</a> 16 <a href="#set-1" class="hi-icon hi-icon-user">User</a> 17 <a href="#set-1" class="hi-icon hi-icon-contract">Contact</a> 18 </div> 19 20 <!--特效2 --> 21 </section> 22 <section id="set-2"> 23 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a"> 24 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a> 25 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a> 26 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a> 27 <a href="#set-2" class="hi-icon hi-icon-support">Support</a> 28 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a> 29 </div> 30 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2b"> 31 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a> 32 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a> 33 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a> 34 <a href="#set-2" class="hi-icon hi-icon-support">Support</a> 35 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a> 36 </div> 37 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2c"> 38 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a> 39 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a> 40 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a> 41 <a href="#set-2" class="hi-icon hi-icon-support">Support</a> 42 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a> 43 </div> 44 <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2d"> 45 <a href="#set-2" class="hi-icon hi-icon-mobile">Mobile</a> 46 <a href="#set-2" class="hi-icon hi-icon-screen">Desktop</a> 47 <a href="#set-2" class="hi-icon hi-icon-earth">Partners</a> 48 <a href="#set-2" class="hi-icon hi-icon-support">Support</a> 49 <a href="#set-2" class="hi-icon hi-icon-locked">Security</a> 50 </div> 51 </section> 52 53 <!--特效3 --> 54 <section id="set-3"> 55 <div class="hi-icon-wrap hi-icon-effect-3"> 56 <a href="#set-3" class="hi-icon hi-icon-cog">Settings</a> 57 <a href="#set-3" class="hi-icon hi-icon-support">Support</a> 58 <a href="#set-3" class="hi-icon hi-icon-star">Fav</a> 59 <a href="#set-3" class="hi-icon hi-icon-contract">Contract</a> 60 <a href="#set-3" class="hi-icon hi-icon-refresh">Refresh</a> 61 </div> 62 </section> 63 64 <!--特效4--> 65 <section id="set-4"> 66 <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a"> 67 <a href="#set-4" class="hi-icon hi-icon-cog">Settings</a> 68 <a href="#set-4" class="hi-icon hi-icon-clock">Time</a> 69 <a href="#set-4" class="hi-icon hi-icon-videos">Videos</a> 70 <a href="#set-4" class="hi-icon hi-icon-list">List</a> 71 <a href="#set-4" class="hi-icon hi-icon-refresh">Refresh</a> 72 </div> 73 <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b"> 74 <a href="#set-4" class="hi-icon hi-icon-cog">Settings</a> 75 <a href="#set-4" class="hi-icon hi-icon-clock">Time</a> 76 <a href="#set-4" class="hi-icon hi-icon-videos">Videos</a> 77 <a href="#set-4" class="hi-icon hi-icon-list">List</a> 78 <a href="#set-4" class="hi-icon hi-icon-refresh">Refresh</a> 79 </div> 80 </section> 81 82 <!--特效5--> 83 <section id="set-5"> 84 <div class="hi-icon-wrap hi-icon-effect-5"> 85 <a href="#set-5" class="hi-icon hi-icon-archive">Archive</a> 86 <a href="#set-5" class="hi-icon hi-icon-chat">Chat</a> 87 <a href="#set-5" class="hi-icon hi-icon-bookmark">Bookmarks</a> 88 <a href="#set-5" class="hi-icon hi-icon-user">User</a> 89 <a href="#set-5" class="hi-icon hi-icon-contract">Contact</a> 90 </div> 91 </section> 92 93 <!--特效6--> 94 <section id="set-6"> 95 <div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-6a"> 96 <a href="#set-6" class="hi-icon hi-icon-images">Images</a> 97 <a href="#set-6" class="hi-icon hi-icon-pencil">Edit</a> 98 <a href="#set-6" class="hi-icon hi-icon-link">Link</a> 99 <a href="#set-6" class="hi-icon hi-icon-mail">Mail</a> 100 <a href="#set-6" class="hi-icon hi-icon-location">Location</a> 101 </div> 102 <div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-6b"> 103 <a href="#set-6" class="hi-icon hi-icon-images">Images</a> 104 <a href="#set-6" class="hi-icon hi-icon-pencil">Edit</a> 105 <a href="#set-6" class="hi-icon hi-icon-link">Link</a> 106 <a href="#set-6" class="hi-icon hi-icon-mail">Mail</a> 107 <a href="#set-6" class="hi-icon hi-icon-location">Location</a> 108 </div> 109 </section> 110 </div>
CSS 如下
.container { height: 100%; position: relative; } .container > section { min-height: 100%; margin: 0 auto; padding: 20em 3em; } .touch .container > section { padding: 0; min-height: 0; } .container > header { margin: 0 auto; padding: 2em 1em 2em; position: fixed; top: 0; left: 0; width: 100%; text-align: center; background: #fff; z-index: 999999; -webkit-backface-visibility: hidden; } .touch .container > header { position: relative; } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; opacity: 0.6; padding: 0 0 0.6em 0.1em; } .container > section p { color: #fff; text-align: center; padding: 1em; margin: 0; } /* To Navigation Style */ .codrops-top { background: #fff; background: rgba(255, 255, 255, 0.6); text-transform: uppercase; width: 100%; font-size: 0.69em; line-height: 2.2; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999999; } .codrops-top a { padding: 0 1em; letter-spacing: 0.1em; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.95); color: #777; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } .codrops-icon:before { font-family: 'codropsicons'; margin: 0 4px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } .codrops-icon-archive:before { content: "\e002"; } .codrops-icon-next:before { content: "\e000"; } .codrops-icon-about:before { content: "\e003"; } /* Demo Buttons Style */ .codrops-demos { padding-top: 1em; font-size: 0.9em; } .touch .codrops-demos { display: none; } .codrops-demos a { display: inline-block; margin: 0.5em; padding: 0.6em 1em; border: 3px solid #ddd; font-weight: 700; } .codrops-demos a:hover { opacity: 0.6; } .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { border: 3px solid #aaa; opacity: 1; color: #aaa; } #set-4 { background: #0e83cd; } #set-5 { background: #702fa8; } #set-6 { background: #64bb5d; } #set-7 { background: #d54f30; } #set-8 { background: #3851bc; } #set-9 { background: #96a94b; } @media screen and (max-width: 800px) { .hi-icon { margin: 15px !important; } .container > section { padding: 20em 1em; } } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } }